Vue.js开发SPA时新增选项后第二行变体输入框不显示如何解决

问题根因 #

新增选项时没有给新的选项对象初始化variants数组，模板中渲染变体输入框的v-for指令没有可遍历的目标，因此不会显示对应的输入框。

修复方案 #

修改methods中的add方法，新增选项时保持和初始选项一致的结构即可：

methods: {
    add() {
        // 新增时完整初始化结构，包含variants数组
        this.options.push({ 
            name: '',
            variants: [
                {
                    name: ''
                }
            ] 
        });
    },
    addVariant(index){
        this.options[index].variants.push({name: ''})
        console.log(this.options[index].variants)
    }
}

如果是Vue2环境，若需要给已存在的选项对象补加variants属性，需要用this.$set(this.options[index], 'variants', [])保证响应式，本次直接在新增时就初始化属性不需要额外操作。

可选优化建议 #

当前使用数组索引作为v-for的key值属于非最佳实践，如果后续有删除、排序选项的需求，建议给每个option和variant生成唯一id作为key，避免出现渲染异常。

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