从数组中删除特定对象会继续删除最后一项

Question

这是我所拥有的，我会尽可能多地解释它：

1. 我的 HTML 代码中有一个模式，如下所示：

    <div id="favorites-modal-edit" class="modal">
        <div class="modal-background"></div>
        <div class="modal-card px-4">
            <header class="modal-card-head">
                <p class="modal-card-title">Favorites</p>
                <button class="delete" aria-label="close"></button>
            </header>
            <section class="modal-card-body">
                <div class="container">
                    <div id="favorites-modal-edit-wrapper" class="columns is-multiline buttons">
                        <favorites-edit-component v-for="(favorite, index) in favorites_list" :key="favorite.id" :favorite="favorite" />
                    </div>
                </div>
            </section>
            <footer class="modal-card-foot">
                <button class="button" @click="addItem">
                    Add Item
                </button>
            </footer>
        </div>
    </div>
   

id="favorites-modal-edit" 是 Vue.js 应用程序，然后我有 <favorites-edit-component /> vue.js 组件。

---

这是我的 JS 代码：

我生成了我的favorites_list，它是一个对象数组，如下所示：

const favorites_list = [
    {
        id: 1,
        name: 'Horse',
        url: 'www.example.com',
    },
    {
        id: 2,
        name: 'Sheep',
        url: 'www.example2.com',
    },
    {
        id: 3,
        name: 'Octopus',
        url: 'www.example2.com',
    },
    {
        id: 4,
        name: 'Deer',
        url: 'www.example2.com',
    },
    {
        id: 5,
        name: 'Hamster',
        url: 'www.example2.com',
    },
];

然后，我有我的vue.js 组件，它是favorites-edit-component，它接收@click="removeItem(this.index)，它在索引上以未定义的形式返回。

Vue.component('favorites-edit-component', {
   template: `
    <div class="column is-half">
      <button class="button is-fullwidth is-danger is-outlined mb-0">
        <span>{{ favorite.name }}</span>
        <span class="icon is-small favorite-delete" @click="removeItem(this.index)">
          <i class="fas fa-times"></i>
        </span>
      </button>
    </div>
   `,
    props: {
        favorite: Object
    },
    methods: {
       removeItem: function(index) {
           this.$parent.removeItem(index);
       },
    }
});

然后我有 vue.js 应用程序，它是父应用程序，如下所示：

new Vue({
    el: '#favorites-modal-edit',

    // Return the data in a function instead of a single object
    data: function() {
        return {
            favorites_list
        };
    },
    methods: {
        addItem: function() {
            console.log('Added item');
        },
        removeItem: function(index) {
            console.log(index);
            console.log(this.favorites_list);
            this.favorites_list.splice(this.favorites_list.indexOf(index), 1);
        },
    },
});

问题：

由于某种原因，每次我从列表中删除一个项目时，它都会删除列表中的最后一个项目，我不知道为什么会这样做，看看发生了什么：

这是我正在关注的指南：
How to remove an item from an array in Vue.js

每次触发remoteItem()函数时，该项目都会返回未定义，如下所示：

感谢所有帮助！

Answer 1

我会稍微重构一下你的代码。

在您的收藏夹编辑组件中 将您的 removeItem 方法更改为

removeItem() {
  this.$emit('delete');
},

然后，你在哪里使用你的组件（在父模板中） 添加事件捕获器以捕获子级发出的“删除”事件。

<favorites-edit-component v-for="(favorite, index) in favorites_list" :key="favorite.id" :favorite="favorite" @delete="removeItem(index)"/>

您现在遇到的问题是您试图在子组件中引用“this.index”，但子组件不知道它被呈现为什么索引，除非您专门将它传递给孩子作为道具。

此外，如果您将索引作为道具向下传递，则必须在模板中将其称为“索引”而不是“this.index”。

Answer 2

1. 你的favorites-edit-component模板有错误，实际上在vue模板中，当你想使用prop，data，computed，mehods，...，不要使用this => 这里有一个错误：@click="removeItem(this.index)" => 另外，索引在哪里声明？数据 ？道具？

2. 您正在调用this.$parent.removeItem(index); 然后在removeItem 中您正在执行this.favorites_list.splice(this.favorites_list.indexOf(index), 1); 这意味着您要删除数组中等于索引的值而不是位于索引处的值 => this.favorites_list[index] != this.favorites_list[this.favorites_list.indexOf(index)]

另外，我建议你修改favorites-edit-component 组件以使用事件，这样它可以更可重用：

favorites-edit-component:

<template>
  <div class="column is-half">
    <button class="button is-fullwidth is-danger is-outlined mb-0">
      <span>{{ favorite.name }}</span>
      <span class="icon is-small favorite-delete" @click="$emit('removeItem', favorite.id)">
        <i class="fas fa-times"></i>
      </span>
    </button>
  </div>
</template>

在父组件中：

<template>
  ...
  <div id="favorites-modal-edit-wrapper" class="columns is-multiline buttons">
    <favorites-edit-component
      v-for="favorite in favorites_list"
      :key="favorite.id"
      :favorite="favorite"
      @removeItem="removeItem($event)"
    />
  </div>
  ...
</template>

<script>
export default {
  data: function () {
    return {
      favorites_list: [],
    };
  },
  methods: {
    ...
    removeItem(id) {
      this.favorites_list = this.favorites_list.filter((favorite) => favorite.id !== id);
    }
    ...
  },
};