vue.js-Methode zum Verschieben der Array-Position und zum gleichzeitigen Aktualisieren der Ansicht

Im Folgenden werde ich Ihnen eine Methode zum Verschieben der Array-Position und zum Aktualisieren der Ansicht in vue.js vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Verwenden Sie vue.js v-for, um mehrere Optionen zu binden. Sie müssen die Optionen sortieren und nach oben und unten verschieben.

Sie müssen die Positionen der Arrays in Optionen austauschen. Normalerweise wird es so geschrieben:

Angenommen, Sie verschieben eins nach vorne:

var index = this.options.indexOf(option); //获取当前选项对象在数组里面的索引。
var tempOption = this.options[index-1]; //存储前一个
this.options[index-1] = option;(this.options[index])
this.options[index] = tempOption;

Dies ändert zwar die Reihenfolge des Arrays, aber die Ansicht wird nicht aktualisiert und verschoben. Einzelheiten finden Sie in der Beschreibung des Arrays auf der offiziellen Vue-Website

Eine der Lösungen besteht darin, sein Objekt zu ändern und die Set-Methode von Vue zu verwenden:

var index = options.indexOf(option); 
var tempOption = options[index - 1]; 
Vue.set(options, index - 1, options[index]); 
Vue.set(options, index, tempOption);

The Oben habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwenden von Vue + Vuex zum Implementieren von todolist (ausführliches Tutorial)

Verwenden von Vue zum Implementieren der Erstellung einer Tabelle Hier erhalten Sie die ID jeder Zeile (ausführliches Tutorial)

So implementieren Sie das QQ-Seitenmenü mit dem Vue Mobile UI Framework (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonvue.js-Methode zum Verschieben der Array-Position und zum gleichzeitigen Aktualisieren der Ansicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!