gpt4 book ai didi

Vue.js 2 - 组件上的 $forceUpdate() 不刷新计算属性?

转载 作者:搜寻专家 更新时间:2023-10-30 22:11:49 31 4
gpt4 key购买 nike

我不确定我这样做是对还是错,但我似乎找到了如何为计算值更新 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?

最佳答案

不要改变 prop - 它们不像数据定义的属性。有关详细信息,请参阅此内容:

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

相反,按照链接中的建议,声明一个从 prop 初始化的本地数据属性并改变它。

关于Vue.js 2 - 组件上的 $forceUpdate() 不刷新计算属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42300284/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com