未调用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>