Vue.js 2-组件上的$ forceUpdate（）不会刷新计算的属性吗？

Question

我不确定我是对还是错，但是所有的答案似乎都找到了如何为计算值更新dom ...

我有这个组成部分：

Vue.component('bpmn-groups', {
    props: ['groups', 'searchQuery'],
    template: '#bpmn-groups',
    computed: {
        filteredGroups: function () {
            var self = this;
            return this.groups.filter(function(group) {
                self.searchQuery = self.searchQuery || '';
                return _.includes( group.name.toLowerCase(), self.searchQuery.toLowerCase() );
            });
        }
    },
    methods: {
        clearFilter: function () {
            this.searchQuery = '';
        },
        deleteGroup: function(group) {
            Vue.http.delete('api/groups/'+group.id ).then(response => { // success callback
                var index = this.groups.indexOf(group); // remove the deleted group
                this.groups.splice(index, 1);
                this.$forceUpdate(); // force update of the filtered list?
                toastr.success('Schem? grup? <em>'+group.name+'</em> s?kmingai pašalinta.');
            }, response => { // error callback
                processErrors(response);
            });
            this.$forceUpdate();
        },
    },
});

在模板中，我只有一个简单的v-for可以通过filteredGroups进行操作：

<input v-model="searchQuery" type="text" placeholder="Search..." value="">
<div v-for="group in filteredGroups" class="item">...</div>

删除工作正常，将其从groups属性中删除，但是filteredGroups值仍然具有完整的组，直到我实际执行搜索或以某种方式触发其他操作为止。

如何解决该问题，以便在组更新后更新filteredGroup？

Answer 1

不要改变道具——它们不像数据定义的属性。请参阅此了解更多信息：

https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow

相反，按照链接中的建议，声明一个从 prop 初始化的本地数据属性并对其进行变异。