Vue 更新 v-for 循环中的所有输入字段，而不是只更新一个

Question

所以我已经为这个问题绞尽脑汁好几个小时了，但谷歌搜索还没有成功。

我有一个迭代对象数组的 v-for 循环。在那个 v-for 循环中，我使用该选项的名称和价格呈现输入字段。我遇到的问题是，如果我更新一个字段，它们都会更新。看起来他们共享完全相同的 v 模型，但事实并非如此。这是我的 HTML

            <div
                v-for="(option, index) in options"
                :key="index"
                class="row w-full mt-2"
            >
                <text-input
                    v-model="option.name"
                    label="Optie"
                    class="col w-1/2"
                />
                <text-input
                    v-model="option.price"
                    label="Prijs"
                    prefix="+ €"
                    class="col w-1/4"
                />
            </div>

        <button
            class="text-gray-700 flex items-center mt-3"
            @click.prevent="addNewOption"
        >
            <icon
                icon="icons/plus-circle"
                class="w-4 h-4 mr-2 icon icon-light"
            /> Add options
        </button>

我的js

data() {
    return {
       newOption: {
            name: null,
            price: null,
        },

        options: [],
    };
},
methods: {
      addNewOption() {
        this.options.push(this.newOption);
    },
},

你们能看出我哪里做错了吗？

提前致谢！

Answer 1

我猜你一遍又一遍地添加相同的 this.newOption 对象。所以如果你改变一个，你就改变了它们，因为它们是同一个对象。因此，使用扩展运算符或更好的方法，只需从组件状态中删除 newOptions 即可。看起来这不需要是反应状态。

data() {
    return {
        options: [],
    };
},
methods: {
    addNewOption() {
        this.options.push({
            name: null,
            price: null,
        });
    },
},

Vue 更新 v-for 循环中的所有输入字段，而不是只更新一个

Vue updates all input fields in v-for loop instead of only one

javascript

vue.js

v-for

v-model