vue计算的属性没有被调用

Question

未调用VUE计算的属性。

这是代码：

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
        }
    }
}

我无法用V-For返回计算的属性到按钮

Answer 1

我认为，您制作了错别字，

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

而不是

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

，您需要为按钮写一个文字。

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