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 object。 因此，如果您更改一個，則將它們全部更改，因為它們是相同的 object。 所以使用擴展運算符或更好，只需從組件的 state 中刪除 newOptions。 看起來這不需要反應 state。

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