拼接总是删除Vue.js中的最后一项

问题描述

我确定问题很简单，但是我已经在其中堆放了几个小时。

我创建了一个可以添加或删除以上传文件的应用。

当我单击删除按钮时，它总是删除最后一个项目。 我试图通过添加:key="key"来解决它，但它什么都没有改变。

我的代码可能有什么问题？ 这是codepen： https://codepen.io/shanyulin/pen/RwaWaZy?editors=1010

HTML

<div id="app">
  <div class="form-group clearfix" v-for="(event,key) in events" v-bind:key="key">
  <input name="attachment[]" accept="image/png,image/jpeg,application/pdf" type="file" class="form-control form-control-lg">
  <button @click="deleteEvent(key)" class="btn btn-danger">x</button>
</div>
<button @click="addEvent" class="btn btn-dark">+</button>
</div>

Js

const app = new Vue({
    el: '#app',data() {
        return {
            events: [{}],}
    },methods: {
        addEvent: function() {
            let quantity = this.events.length;
            if (quantity < 6) {
                this.events.push({
                    index: ''
                });
            } else {
                return false;
            }
        },deleteEvent: function(key) {
            let quantity = this.events.length;
            if (quantity == 1) {
                alert("Please upload at least one file.");
            }
            if (quantity > 1) {
                const confirmed = confirm("Do you really want to delete?");
                if (confirmed) {
                    this.events.splice(key,1);
                }
            }
        }
    },});

解决方法

数组索引对于key不可靠。如果您的数组包含三个元素，则键为0,1,2。删除第二个键时，键是0,1，而不是0,2。

您需要为每个元素提供唯一键。

const app = new Vue({
    el: '#app',data() {
        return {
            events: [{}],uniqueKey: 0,}
    },methods: {
        addEvent: function() {
            let quantity = this.events.length;
            if (quantity < 6) {
                this.events.push({
                    index: '',key: this.uniqueKey++
                });
            } else {
                return false;
            }
        },deleteEvent: function(key) {
            let quantity = this.events.length;
            if (quantity == 1) {
                alert("Please upload at least one file.");
            }
            if (quantity > 1) {
                const confirmed = confirm("Do you really want to delete?");
                if (confirmed) {
                    this.events.splice(key,1);
                }
            }
        }
    },});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="form-group clearfix" v-for="(event,key) in events" v-bind:key="event.key">
  <input name="attachment[]" accept="image/png,image/jpeg,application/pdf" type="file" class="form-control form-control-lg">
  <button @click="deleteEvent(key)" class="btn btn-danger">x</button>
</div>
<button @click="addEvent" class="btn btn-dark">+</button>
</div>