为什么没有显示第二个输入行？ Vue.js答案

【问题标题】：why the second inputs row don't get shown ? Vue.js为什么没有显示第二个输入行？ Vue.js
【发布时间】：2021-10-08 15:01:40
【问题描述】：

我正在尝试制作一个有选项的 SPA，并且每个选项都有您在图像上看到的变体。 [1]：https://i.stack.imgur.com/82I5U.png

问题是没有显示第二个输入行。

我的代码：

<template>
                <h4>OPTIONS</h4>
                <hr>
                <div class="row g-3 align-items-center">
                    <div v-for="(option, index) in options" :key="index">
                        <div class="">
                            <label class="col-form-label">Option {{index+1}}</label>
                        </div>
                        <div class="mb-2">
                            <input v-model="option.name" name="option[]" type="text" class="form-control" >
                        </div>
                        <label class="col-form-label">Variants</label>
                        <div class="d-flex">
                            <div v-for="(variant,vIndex) in options[index].variants" :key="vIndex">
                                <input v-model="variant.name" type="text" class="form-control">
                            </div>
                            <button @click="addVariant(index)" type="button" class="btn btn-secondary btn-sm" style="width: 10%">Add</button>
                        </div>
                        <hr>
                    </div>
                    <button type="button" class="btn btn-secondary col-4" @click="add()">add option</button>
                </div>
</template>

<script>
export default {
    data(){
        return{
            options: [
                {
                    name: '',
                    variants: [
                        {
                            name: '',
                        }
                    ]
                }
            ],

        }
    },
    methods: {
        add() {
            this.options.push({ name: '' });
        },
        addVariant(index){
            this.options[index].variants.push({name: ''})
            console.log(this.options[index].variants)
        }
    }
}
</script>

希望你能帮忙。

【问题讨论】：

不会报错吗？您正在将对象推送到选项 [1] 的不存在属性变体。据我所知，它至少应该是 this.options.push({ name: '', variables:[] }) 。另一件事是它可能不是反应性的？您可能还需要使其具有反应性...vuejs.org/v2/guide/reactivity.html#For-Objects
是的，这是错误，谢谢。

标签： javascript vue.js vuejs2 vue-component vuejs3

【解决方案1】：

您没有在add 方法中将variants 附加到options。尝试添加 variants 时可能会出现错误。

这样试试

add() {
    this.options.push({ name: '',  variants: [] });
 },
addVariant(index){
    this.options[index].variants.push({name: ''})
    console.log(this.options[index].variants)
 }

【讨论】：