我有以下刀片文件:
@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
而不是道具现在,我知道您不能直接更改道具,因为那是反模式,所以我使用了计算的道具,但我的更改仍未反映在DOM中。
所以,为什么DOM不更新?