Question

我有一个带有道具列表的组件。列表是输入文件列表。输入改变后立即添加另一个输入。如果我尝试删除，则会出现奇怪的行为。

 removeAnother: function(item) {
  var vm = this;
  var num = vm.$parent.cornerList.indexOf(item);
  vm.$parent.cornerList.splice(num, 1);
},

如何重现：

在第一个输入中选择文件
在第二个输入中选择文件（将在步骤1之后添加）
在第三个输入中选择文件（将在第2步之后添加）
然后点击删除列表中的第一项

预期：删除了第一项但删除了上次添加的

Answer 1

Use a key在您的列表中。

<div v-for="(item, index) in list" :key="item.id">

我修改了你的小提琴，为添加到id数组的每个对象生成cornerList。

var formuploadimage = Vue.extend({
  template: '#template-form-upload-image',
  props: {
    list: {
      type: Array
    }
  },
  data: function() {
    return {
      isFileChanged: false
    }
  },
  watch: {
    validCnt: function() {
       
    },
  },

  methods: {
    onFileChange: function(item) {
	 var vm = this; 
      let id = Math.max.apply(Math, vm.$parent.cornerList.map(c => c.id)) + 1
        var newItem = {id};
        vm.$parent.cornerList.push(newItem);
    },
    removeAnother: function(item) {
      var vm = this;
      var num = vm.$parent.cornerList.indexOf(item);
      vm.$parent.cornerList.splice(num, 1);
    },
  },
});




var app = new Vue({
  el: ".lists-wrappers",
  data: {
    cornerList: [{id: 1}],
  },
  components: {

    formuploadimage: formuploadimage
  },
  methods: {

  },

});

.select-file{
  width:250px;
  border:1px solid red;
}

<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
<div class="lists-wrappers">
  <formuploadimage :list="cornerList"></formuploadimage>
</div>


<script type="text/x-template" id="template-form-upload-image">
  <div>

    <div v-for="(item, index) in list" :key="item.id">
      
      <div class="select-file">
      <a href="#" v-on:click="removeAnother(item)">REMOVE</a><br/>
        <label for="file-input">
          +Add photo
        </label>
        <input type="file" @change="onFileChange(item)"  />
      </div>
    </div>
  </div>
</script>

VueJs2：从组件中的父数组中删除项目

1 个答案: