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

Question

我正在尝试制作一个 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>

希望能帮到你。

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