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型的經歷filteredGroups：

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

缺失正常工作，它會刪除它從組屬性，但是filteredGroups值仍然有充分的組，直到我實際上執行搜索或以某種方式觸發呃其他的東西...

我該如何修復它，以便在更新組後更新filteredGroup？

Answer 1

不要改變道具 - 它們不像數據定義的屬性。有關更多信息，請參見本：

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

相反，如鏈接建議，宣佈從道具初始化的本地數據屬性和變異這一點。