数组中的值已正确更新，但是正在删除其他组件

Question

我正在创建一个可以容纳多个Value组件的组件。用户可以添加任意数量的内容。第一个值（组件）不能删除，因为它旁边没有删除按钮。每当我添加两个新的Value组件时，我都可以输入该值的名称和说明。我发出输入事件，以便父组件可以保留所有组件中的所有值。每当我单击值旁边的“删除”按钮时，它将调用父方法，因此可以将其从值列表中删除。它已正确删除，我将打印更新的列表，以便可以看到正确的值已删除。但是，它删除的是最后一个组件，而不是我单击的“删除”按钮。该列表是正确的，但是基于该列表创建的组件不正确，甚至包含旧值。我看不到我在做什么错。

ParentComponent

<div v-for="(component, index) in components" v-bind:key="index">
    <Value
        class="value"
        :valueIndex="index"
        v-model="components[index]"
        :id="'value_' + index"
        :isFirst="index === 0"
     ></Value>
</div>

export default {
    name: "Values",
    components: {
        Value
    },
    data() {
        return {
            components: [{
                name: "",
                description: ""
            }],
            componentsCount: 1
        }
    },
    methods: {
        addValue() {
            this.components.push({
                name: "",
                description: ""
            });
        },
        removeValue(valueIndex) {
            console.log(valueIndex);
            console.log(this.components[valueIndex]);
            this.components.splice(valueIndex, 1);
        }
    }

ValueComponent

<b-col md="4" sm="12">
     <input
         type="text"
         class="value-input"
         v-model="buffer.name"
         :name="'description_' + (this.valueIndex + 1)"
         :placeholder="'Description ' + (this.valueIndex + 1)"
         @input="$emit('input', buffer)"
     >
</b-col>
<b-col v-if="isFirst" md="8" sm="12">
    <input
        type="text"
        class="value-input"
        v-model="buffer.description"
        :name="'description_' + (this.valueIndex + 1)"
        :placeholder="'Description ' + (this.valueIndex + 1)"
        @input="$emit('input', buffer)"
    >
</b-col>
<b-col v-else md="8" sm="10">
    <b-row>
        <b-col sm="10">
             <input
                  type="text"
                  class="value-input"
                  v-model="buffer.description"
                  :name="'description_' + (this.valueIndex + 1)"
                  :placeholder="'Description ' + (this.valueIndex + 1)"
                  @input="$emit('input', buffer)"
             >
         </b-col>
         <b-col sm="2">
             <button class="garbage-button" @click="removeValue()">
                  <img src="../../assets/bin.svg">
             </button>
         </b-col>
     </b-row>
</b-col>

     export default {
            name: "Value",
            props: {
                valueIndex: {
                    type: Number,
                    required: true
                },
                isFirst: {
                    type: Boolean,
                    required: true
                }
            },
            data() {
                return {
                    buffer: Object.assign({}, this.value)
                }
            },
            methods: {
                removeValue() {
                    this.$parent.removeValue(this.valueIndex);
                }
            }
        }
    }

告诉我，如果您需要更多我的代码，或者问题没有得到很好的解释。

Answer 1

我以前遇到过同样的问题。不知何故，它对职位感到困惑，并删除了错误的职位。

对我有用的是使用唯一标识符。我使用了uuidv4，它解决了这个问题。这将创建可用于绑定到项目的唯一键。

Answer 2

这与vue的in-place-patch功能有关，因为将索引用作key，在这种情况下无效，请使用另一个唯一键（如果可用）（例如，其他答案中提到的id） 。由于前一个，并且您仅在子级中将值分配给buffer一次，因此更改发生时不会反映该值。您可以使用watch解决此问题，并在v-for中发生更改时相应地修改buffer：

props: {
  // ...
  value: {
    type: Object,
    default: () => {
      return {};
    }
  }
},
data() {
  return {
    buffer: Object.assign({}, this.value)
  };
},
watch: {
  value(val) {
    this.buffer = val;
  }
}

DEMO

仍然值得一提的是，实际上正确的项已被删除，由于Vue处理v-for的原因，值只是没有更新。