Méthode vue.js pour déplacer la position du tableau et mettre à jour la vue en même temps

Ci-dessous, je vais partager avec vous une méthode pour déplacer la position du tableau et mettre à jour la vue dans vue.js. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Utilisez vue.js v-for pour lier plusieurs options, et vous devez trier les options et les déplacer de haut en bas.

Vous devez échanger les positions des tableaux dans les options. Cela s'écrit généralement comme ceci :

Supposons que vous en avanciez un :

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

Cela change l'ordre du tableau, mais la vue n'est pas mise à jour ni déplacée. Pour plus de détails, voir la description du tableau sur le site officiel de vue

Une des solutions est de changer son objet et d'utiliser la méthode set de vue :

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

Ce qui précède est ce que j'ai compilé. Tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Utiliser vue + vuex pour implémenter todolist (tutoriel détaillé)

Utiliser vue pour implémenter comment créer une table Ici, obtenez l'identifiant de chaque ligne (tutoriel détaillé)

Comment implémenter le menu latéral QQ à l'aide du framework vue mobile UI (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!