Vue computed计算属性无法被v-for正常调用渲染的问题

问题复现代码 #

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指令遍历名为tags的computed计算属性生成button按钮时，即便正确绑定了v-for指令，也无法正常获取计算属性的返回值完成按钮内容渲染，计算属性的返回逻辑未正常生效。

问题原因 #

核心问题出在tags计算属性的返回值写法错误：

• JS 中小括号包裹、逗号分隔的表达式是逗号操作符，会从左到右执行每个表达式，最终只返回最后一个表达式的值，也就是这里实际返回的不是预期的包含三个标签的数组，而是单个字符串'reading'
• v-for遍历字符串时会逐个迭代字符串的每个字符，会生成7个空按钮，加上没有在<button>标签内写入{{ tag }}插值，自然看不到任何按钮内容
• 额外问题：写在button标签上的border rounded px-1 py-px font-5样式类没有绑定到class属性上，会被识别为普通无效HTML属性，样式不会生效

修复方案 #

按以下三点修改即可：

• 把计算属性的返回值改为标准数组格式，用方括号[]包裹所有标签元素
• 在button标签内部加上{{ tag }}插值，渲染每个标签的文本
• 给按钮的样式类补上class绑定，同时给v-for补充唯一key属性（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" 
                    :key="tag"
                    class="border rounded px-1 py-px font-5"
                >
                    {{ tag }}
                </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']
        }
    }
}

内容的提问来源于stack exchange，提问作者Sardor