Vue не удаляет нужный компонент из списка - PullRequest
Новая
       7

Vue не удаляет нужный компонент из списка

0 голосов
/ 25 февраля 2019

Я получил: 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));
    }

  },
})

1 Ответ

0 голосов
/ 25 февраля 2019

Работает нормально, если вы используете item.id в качестве key вместо index и , поместите key в настоящий элемент DOM, а не template.Использование index в качестве ключа является анти-паттерном . 

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>
...