javascript - 我怎样才能 react 性地从作为 Prop 传递的数组中删除一个对象，以便它反射(reflect)在 DOM 中？

Question

我有以下 Blade 文件:

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-xl-7 mx-auto">
                <items :items="{{ $items  }}" />
            </div>
        </div>
    </div>
@endsection

其中 $items 是从 Controller 中提取的对象的 JSON 数组。现在，items 组件看起来像这样:

<template>
    <div>
        <item v-for="(item, key) in computedItems" :key="key" :item="item"/>
    </div>
</template>

computedItems 属性如下所示:

computed: {
    computedItems() {
        // referring to the prop that is passed from the blade file
        let items = this.items;

        if (this.filterOptions.type !== 'Clear') {
            items = items.filter(i => i.status === this.filterOptions.type);
        }

        if (this.searchOptions.query.trim() !== '') {
            items = items.filter(
                i => i.name.toLowerCase().indexOf(this.searchOptions.query.toLowerCase()) !== -1
            );
        }

        if (this.sortOptions.type === 'asc') {
            items.sort((a, b) => a.id - b.id);
        } else if (this.sortOptions.type === 'desc') {
            items.sort((a, b) => b.id - a.id);
        }

        return items;
    }
}

在 item 子组件中，您可以通过以下方法删除 items:

methods: {
    _delete() {
        const _confirm = confirm('Are you sure you want to delete this item?');

        if (!_confirm) {
            return;
        }

        axios.delete(`/items/${this.item.id}`).then(response => {
            this.$eventBus.$emit('deleted', { id: this.item.id })
        });
    }
}

事件被父级(items 组件)拾取并处理:

deleted(item) {
    const i = this.items.findIndex(_i => item.id === _i.id);

    this.items.splice(i, 1);
}

但由于某种原因，DOM 没有更新，v-for 仍然显示已删除的对象，但是，如果我转储 prop，它表明它已被修改。我怀疑 Vue 无法判断该对象已被修改，因为它是 props 的一部分，而不是 data。我尝试了以下方法:

• 使用 Vue.delete 代替 Array.splice
• 使用 this.$delete 代替 Array.splice
• 在计算的 prop 而不是 prop 上使用 Array.splice
• 设置观察者
• 扩展计算属性以接受 getter 和 setter
• 在 Vue 论坛上进行大量搜索

现在，我知道你不能直接改变 prop，因为那是反模式，所以我使用了计算 prop，但我的更改仍然没有反射(reflect)在 DOM 中。

那么，为什么 DOM 没有更新？

Answer 1

按要求发表我的评论，我将列出主题的要点:

• One Way Data Flow : 没有 Prop 突变。如果有一个 prop 需要在组件中本地改变，首先将其克隆到数据并改变克隆。

• 使用 Vuex而不是用于状态/事件管理的事件总线

• Vuex 允许全局状态，可以通过组件内(或其他地方)的操作以受控方式改变全局状态。数据从商店向下流动，并通过映射/调用的操作向上发出。