javascript - Vuejs从数组中删除元素无法完全删除

Question

当我尝试运行以下代码，并从数组中删除一项时，该项目并未完全删除(每行还有其他复选框部分未删除)我添加了一个 :key="index ”并且没有帮助。尽管如此，当我将 :key="index"更改为 :key="item"时它可以工作，但问题是我收到警告 [Vue warn]: 避免使用非原始值作为键，使用字符串/改为数值

<template>
  <div>
    <filters-list-item v-for="(item, index) in items" :key="index" v-on:deleteItem="deleteItem(index)" :items="items" :item="item"  :filterButtonSetting="filterButtonSetting" class="pb-3 pt-3 space-line"></m-filters-list-item>
    <div class="pt-3">
        <button class="btn" @click="add()">
            add
        </button>
    </div>
  </div>
</template>

<script>
import FiltersListItem from './FiltersListItem';

export default {
    name: 'FiltersList',
    components: {
        FiltersListItem
    },
    props: {
        items: Array,
        filterButtonSetting: Object
    },
    methods: {
        add() {
            this.items.push({});
        },
        deleteItem(index) {
            this.$delete(this.items, index);
        },

    }
};

Answer 1

只要不与循环中的任何元素交互，使用索引就可以。

但是，如果您是，那么建议不要这样做。

您应该使用另一个唯一项目的标识符，也许可以从后端提供一个。