vue.js verschiebt die Array-Position und aktualisiert die Ansicht in Echtzeit

Dieses Mal bringe ich Ihnen vue.js, um die Position des Arrays zu verschieben und in Echtzeit zu aktualisierenAnsicht, vue.js verschiebt die Array-Position und aktualisiert es in Echtzeit. Was sind die Vorsichtsmaßnahmen der Ansicht? Hier ist ein praktischer Fall, schauen wir uns das an.

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

Es ist notwendig, die Positionen der Arrays in Optionen auszutauschen, die normalerweise so geschrieben werden:

Angenommen, es geht weiter:

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

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

Eine der Lösungen besteht darin, das 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);

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere Informationen finden Sie auf der chinesischen PHP-Website. Weitere verwandte Artikel!

Empfohlene Lektüre:

Wie man mit der Optionsüberlagerung von select umgeht

Wie man die CSS-Bibliothek in Vue importiert .js

Das obige ist der detaillierte Inhalt vonvue.js verschiebt die Array-Position und aktualisiert die Ansicht in Echtzeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!