Vue不会从列表中删除适当的组件

Question

我得到了：key =“ index”，但是它仍然没有按照我的需要进行。 例如，如果您添加6个项目，然后从第三个项目的select中选择某项，然后点击该项目的“删除”按钮，它将删除另一个项目，但不会删除该项目。

这里是小提琴的链接 https://jsfiddle.net/benderlio/ecyskz83/1/

    Vue.config.devtools = true
Vue.component('select-component', {
  data: function () {
    return {
      currentSelectedData: undefined,
    }
  },
  template: `<div>
              <select v-model="currentSelectedData">
                <option v-for="(item,key) in dataArray" :key="key" :value="key">{{item}}</option>
              </select>
              <select  v-if="currentSelectedData >= 0">
                <option v-for="(item,key) in tempData" :key="key" :value="key">{{item}}</option>
              </select>
            </div>`,
  watch: {
    currentSelectedData(newValue, oldValue) {
      console.log('', newValue, oldValue);
      this.$emit("got-selected-value", newValue)
    }
  },
  props: {
    'data-array': {
      type: Array,
      required: true,
    },
    'temp-data': {
      type: Array,
      required: true,
    },
  },
})

new Vue({
  el: '#app',
  data: {
    components: [],
    dataFirstSelect: ["sheet3", "sheet4", "sheet5"
    ],
    dataSecondSelect: [1, 2, 3]
  },
  methods: {
    emitedValue(payload) {
      console.log('Got the value from child: ', payload);
    },
    addComp() {
      const comp = {
        id: new Date().getTime()
      };
      this.components.push(comp)
    },
    remove(id) {
      // this.components = this.components.filter(i => i.id !== id)
      console.log('Remove', id, this.components);
      //this.$delete(this.components, id)
      this.components.splice(id, 1)
    },
    log() {
      console.log('---------', this.components.map(i => i.id));
    }

  },
})

Answer 1

如果您将item.id用作key而不是index，那么效果很好，将key放在真实的DOM元素上，而不是template。将index用作键is an anti-pattern。

Vue.config.devtools = true
Vue.component('select-component', {
  data: function() {
    return {
      currentSelectedData: undefined,
      selectedTemp: undefined
    }
  },
  template: `<div>
                  <select v-model="currentSelectedData">
                    <option v-for="(item, key) in dataArray" :value="key">{{item}}</option>
                  </select>
                  <select v-if="currentSelectedData >= 0" v-model="selectedTemp">
                    <option v-for="(item, key) in tempData" :value="key">{{item}}</option>
                  </select>
<div>{{currentSelectedData}}</div>
<div>{{selectedTemp}}</div>
                </div>`,
  watch: {
    currentSelectedData(newValue, oldValue) {
      console.log('', newValue, oldValue);
      this.$emit("got-selected-value", newValue)
    }
  },
  props: {
    'data-array': {
      type: Array,
      required: true,
    },
    'temp-data': {
      type: Array,
      required: true,
    },
  },
})

new Vue({
  el: '#app',
  data: {
    components: [],
    dataFirstSelect: ["sheet3", "sheet4", "sheet5"],
    dataSecondSelect: [1, 2, 3]
  },
  methods: {
    emitedValue(payload) {
      console.log('Got the value from child: ', payload);
    },
    addComp() {
      const comp = {
        id: new Date().getTime()
      };
      this.components.push(comp)
    },
    remove(id) {
      // this.components = this.components.filter(i => i.id !== id)
      console.log('Remove', id, this.components);
      //this.$delete(this.components, id)
      this.components.splice(id, 1)
    },
    log() {
      console.log('---------', this.components.map(i => i.id));
    }

  },
})

.select-component {
  display: block;
  margin: 10px;
}

.item {
  padding: 10px;
  margin: 10px;
  border: 1px solid gray;
}

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <button @click="addComp">Add</button>
  <template v-for="(item,index) in components">
      <div class="item" :key="item.id">
        id: {{item.id}} {{index}}
        <button @click="remove(index)">Remove</button>
        <select-component class="select-component" v-on:got-selected-value="emitedValue" :data-array='dataFirstSelect'
          :temp-data='dataSecondSelect'>
        </select-component>
      </div>
    </template>
</div>