Vue.js 2 - $ Forceupdate() auf Komponenten nicht berechnet Eigenschaften auffrischen?

Question

Ich bin mir nicht sicher, ob ich das richtig oder falsch mache, aber alle Antworten, die ich scheinen zu finden, wie man die dom für berechnete Werte aktualisieren ...

ich diese Komponente haben:

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(); 
     }, 
    }, 
}); 

Und ich habe in der Vorlage nur eine einfache v-für durch filteredGroups gehen:

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

das Löschen funktioniert gut, es es von Gruppen Eigenschaft entfernt, aber immer noch der filteredGroups Wert die volle Gruppe hat, bis ich tatsächlich eine Suche durchführen oder irgendwie trigg er etwas anderes ...

Wie kann ich das Problem beheben, so dass der filteredGroup aktualisiert wird, sobald die Gruppe aktualisiert wird?

Answer 1

Eine Stütze nicht mutieren - sie sind nicht wie Daten definierte Attribute. Sehen Sie diese für weitere Informationen:

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

Stattdessen kann, wie in dem Link empfohlen, ein lokales Daten Attribut deklariert, die von der Stütze initialisiert und mutiert, dass.