Question

当我尝试运行以下代码，并从数组中删除一项时，该项并未完全删除（每行中还有其他复选框未删除）我添加了：key =“ index ”，这无济于事。不过，当我将：key =“ index”更改为：key =“ item”时，它可以工作，但是问题是我得到警告 [Vue警告]：避免将非原始值用作键，请使用字符串/数字值

<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

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

但是，如果您愿意，建议不要这样做。

您应该使用另一个唯一商品的标识符，也许从后端提供一个。

Vue.js从数组中删除元素无法完全删除它

1 个答案: