朋友你好，动态添加imgInputer , 删除后渲染有问题

[yukiflandre]

#关键代码：

<div v-for="(item,index) in fileList">
      <imgInputer v-model="item.file" accept="image/*" @onChange="fileChange"/>
      <button type="button" @click="remove(fileList,index)">remove</button>
</div>
<button type="button" @click="add">add</button>


   methods: {
      fileChange(file, name) {
        console.log('File:', file);
        console.log('FileName:', name);
     },
      add(){
        this.fileList.push({
          file:null
        })
      },
      remove(item,index){
        item.splice(index,1)
      }
    }

描述：
当我执行add()方法后，fileList = [{file:null},{file:null}]，添加图片以后fileList = [{file:file1},{file:file2}]，如果执行remove()删除file1,数据正常删除，但是页面上没有实时渲染

[waynecz]

试下
1.

this.$delete(this.item, index)

this.$nextTick(() => { item.splice(index,1) })

[yukiflandre]

不得行
我试了下Vue.$set,，也不行...

[yukiflandre]

找到原因了
和https://segmentfault.com/q/1010000008975102这个问题一样

[yukiflandre]

利用:key解决

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时DOM 状态 (例如：表单输入值) 的列表渲染输出。