javascript - VueJS - 输入文件重复器

Question

我想从数组中删除项目，但有相同的项目，并且 js 删除了最后一项!

let app = new Vue({
  el: '#app',
  data: {
    items: []
  },
  methods: {
    addItem() {
      this.items.push('');
    },
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
});

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<div id="app">
  <ul class="list-group">
    <li class="list-group-item" v-for="(item , index) in items">
      <a href="#" v-on:click.prevent="removeItem(index)">remove</a>
      <input name="form[]" type='file'>
    </li>
  </ul>
  <button @click='addItem'>new item</button>
</div>

JSFiddle:https://jsfiddle.net/6hvbqju2/

Answer 1

Vue 在处理元素列表时使用“就地补丁策略”。当依赖表单输入值时，此策略不适合。

当使用v-for指令时，最好定义一个v-bind:key来给Vue一个跟踪每个节点的提示。

我们将在 items 数组中存储数字并将其用作键。在您的情况下，您应该使用可以充当唯一键的项目属性。

let app = new Vue({
  el: '#app',
  data: {
    counter: 0,
    items: []
  },
  methods: {
    addItem() {
      this.items.push(this.counter++);
    },
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
});

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<div id="app">

  <ul class="list-group">
    <li class="list-group-item" v-for="(item , index) in items" :key="item">
      <a href="#" v-on:click.prevent="removeItem(index)">remove</a>
      <input name="form[]" type='file'>

    </li>
  </ul>
  <button @click='addItem'>new item</button>


</div>