从组件更新数据

Question

基本上我有一个接收对象数组的组件。我的目标是更新该组件内的数据，从该数组中添加或删除一些项目。 代码看起来像这样：

export default {
    props: ['data'],
    methods: {
        add: function() {
            this.data.push({ someVal })
        },
        remove: function() {
            this.data = this.data.filter( item => {
                return item.val !== someVal;
            })
        },
    }
}

对我来说棘手的部分是“添加”方法可以正常工作并更新整个应用程序中的数据。但是“删除”方法没有。谁能给我一个线索？

Answer 1

过滤器中的变量 someVal 未定义，因此它将返回相同的项目。

要删除一个项目，您可以使用 splice() 函数。

例子：

remove: function(index) {
    this.data = this.data.splice(index, 1);
}

在您的模板中使用如下内容：

<div v-for="(item, index) in data" @click="remove(index)"></div>