vue $set implementiert die Zuweisung von Werten zu Array-Sammlungsobjekten

Vue $set Array-Sammlungsobjektzuweisung

In der benutzerdefinierten Array-Objektsammlung von Vue möchten Sie jedem Array-Objekt ein weiteres Attribut und einen weiteren Wert hinzufügen.

// data definiert ein Sammlungsobjekt responseData:[
      {'id':'1','name':'Damenbekleidung','price':115,'num':1,'pic':'../static/img/1.jpg'},
      {'id':'2','name':'Herrenbekleidung','price':110,'num':1,'pic':'../static/img/2.jpg'},
      {'id':'3','name':'Kinderkleidung','price':118,'num':2,'pic':'../static/img/3.jpg'}
],

// Die Anforderung der Vue-Methode gibt Sammlungsobjektdaten zurück, wenn (res.data.code === 'ok') {
 das.Gesamtwerte = res.Daten.Daten.Gesamtwerte;
 diese.Fragenliste = res.data.data.list;
 
}

// Zuweisungsoperation für (let val of that.questionList) {
//Das ist der entscheidende Punkt hat.$set(val,'discussAnswer','0');
}

Verwendung von Vue this.$set

Lösen Sie das Problem, dass Arrays und Objekte nach der Änderung nicht aktualisiert werden

1. Was macht this.$set und warum sollten wir es verwenden?

Wenn Sie feststellen, dass Sie einem Objekt eine Eigenschaft hinzugefügt haben und diese in der Konsole ausgedruckt werden kann, in der Ansicht jedoch nicht aktualisiert wird, müssen Sie möglicherweise die Methode this.$set() verwenden. Einfach ausgedrückt besteht die Funktion von this.$set darin, dieses Problem zu lösen.

Offizielle Erklärung: Fügen Sie einem responsiven Objekt eine Eigenschaft hinzu und stellen Sie sicher, dass die neue Eigenschaft auch responsive ist und Ansichtsaktualisierungen auslöst. Es muss verwendet werden, um einem reaktiven Objekt neue Eigenschaften hinzuzufügen, da Vue normale neue Eigenschaften (wie this.myObject.newProperty = 'hi') nicht erkennen kann.

2. Wie wird es verwendet?

Zum Beispiel:

1. In Vorlage geschriebener Vue-Code:

<div v-for="(Element, Index) in Liste" :Schlüssel="Index"
>{{item.name}}
</div>
<button @click="changeValue" type="primary">Wert ändern</button>
</div>

2. Daten standardmäßig exportieren{}

Daten(){
    zurückkehren {
      Liste:[
        {name:'29Kun',id:1},
        {name:'299Kun',id:2},
      ]
    } 
  }

3. Klicken Sie auf die Schaltfläche, um die Methode changeValue auszulösen

montiert(){
  diese.Liste[2] = {name:'2999Kun',id:3}
  konsole.log(diese.liste[0]);
}, 
Methoden: {
  Wert ändern(){
    dies.$set(diese.list,2,{name:'2999kun',id:3})
  }
}

Aufrufende Methode: this.$set( Ziel, Schlüssel, Wert )

target : die zu ändernde Datenquelle (kann ein Objekt oder ein Array sein)

key : die spezifischen Daten, die geändert werden sollen

value : der neu zugewiesene value

4. Wenn die Schaltfläche nicht angeklickt wird, sieht die Schnittstelle so aus. Obwohl die Schnittstelle nicht angezeigt wird, wurde die Konsole ausgedruckt

5. Wenn auf die Schaltfläche geklickt wird, wird die Methode this.$set aufgerufen und das dritte Attribut erfolgreich angezeigt.

Das Obige ist meine persönliche Erfahrung. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.