Vue computed properties are not being called

Vue computed properties are not being called.

Here is the code :

import Assignment from "./Assignment.js";

export default {
    components: { Assignment },
    template: `
        <section v-show="assignments.length">
            <h2 class="font-bold mb-2">{{ title }}
                <span>({{assignments.length}})</span>
            </h2>

            <div class="flex gap-2">
                <button v-for="tag in tags" border rounded px-1 py-px font-5 class=" "></button>
            </div>
            
            <ul class="border border-gray-600 divide-y divide-gray-600 mt-6">
               <assignment
                    v-for="assignment in assignments"
                    :key="assignment.id" 
                    :assignment="assignment"
                ></assignment>
            </ul>
        </section> 
    `,

    props: {
        assignments: Array,
        title: String
    },

    computed: {
        tags() {
            return ('science', 'math', 'reading')
            //The return is not returning
        }
    }
}

I can not return computed properties to button with even v-for

Answer

I think, you made a typo

tags() {
    // return an array
    return ['science', 'math', 'reading']
}

instead of

tags() {
    // will return 'reading' only.
    return ('science', 'math', 'reading')
}

Also, you need to a text for the button.

        <div class="flex gap-2">
        <button v-for="tag in tags" border rounded px-1 py-px font-5 class=" ">{{tag}}</button>
    </div>

Advertisement

Answer