VueJs - DOM nicht aktualisiert auf Array-Mutation

Question

ich ein Modell, in dem ich ein Array auf Ajax-Erfolg bin Initialisierung nach dem Modell montiert ist

var self = this; 
    $.getJSON("somejson.json", 
     function (data) { 
      var list = []; 
      list = data.list.map(function (item) { 
       return { id: item.id, text: item.text }; 
      }); 

      self.selectableItems = list; 
     }); 

Ich habe einen Klick-Methode auf jedes dieser Elemente, die entfernt der Artikel von selectableItems

 select: function (item) { 
      this.selectableItems.pop(item); 
     }, 

selectableItems macht richtig zunächst, aber wenn ich das Array mutieren, ist die dom nicht aktualisiert. Obwohl das tatsächliche Array korrekt geändert wird.

Ich verifizierte dies, indem ich eine berechnete Eigenschaft habe, die die Anzahl der auswählbaren Artikel zurückgibt. Diese Anzahl wird korrekt aktualisiert, wenn das Objekt entfernt wird, aber das Dom zeigt immer noch das Objekt an.

Ich bemerkte auch, dass, wenn ich den Wert von selectableItems im Ajax hart Code, alles funktioniert wie erwartet!

self.selectableItems = [{ id: 1, text: "adsad"}]; 

Ich bin mir der Vorbehalte der Array-Mutation in Vue bewusst. Aber ich fühle, dass ich etwas Grundlegendes vermisse, da ich gerade angefangen habe, Vue zu erforschen. Kann jemand darauf hinweisen, was ich vermisse?

Answer 1

Array.pop() entfernt das letzte Element aus dem Array, es nimmt kein Argument. Es entfernt nur das letzte Element jedes Argument, das Sie übergeben.

Der Grund, warum Ihre berechnete Eigenschaft, die die Array-Anzahl als letztes Element zeigt, entfernt wird, aber nicht das Element, das Sie möchten.

Verwenden Sie stattdessen Array.splice().

passieren den Index auf Ihre Click-Methode wie folgt aus:

<ul> 
    <li v-for="(item, index) in selectableItems" @click="select(index)>{{item}}</li> 
</ul> 

Skript

select: function (index) { 
     this.selectableItems.splice(index, 1); 
    },