我如何从作为prop传递的数组中以反应方式删除对象,以使其反映在DOM中?

问题描述 投票:2回答:1

我有以下刀片文件:

@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是从控制器提取的对象的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仍在显示已删除的对象,但是,如果我转储道具,则表明它已被修改。我怀疑Vue无法判断该对象已被修改,因为它是props的一部分,而不是data。我尝试了以下方法:

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

现在,我知道您不能直接更改道具,因为那是反模式,所以我使用了计算的道具,但我的更改仍未反映在DOM中。

所以,为什么DOM不更新?

javascript laravel vue.js vuejs2
1个回答
1
投票
© www.soinside.com 2019 - 2024. All rights reserved.