vue.js method to move the array position and update the view at the same time

Below I will share with you a method of moving the array position and updating the view in vue.js. It has a good reference value and I hope it will be helpful to everyone.

Use vue.js v-for to bind several options, and you need to sort the options and move them up and down.

It is necessary to exchange the position of the array in options. It is usually written like this:

Assume moving forward one:

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

This does change the order of the array, but the view is not updated and moved. For details, see the description of the array on the vue official website.

One of the solutions is to change its object and use the set method of vue:

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

The above is what I compiled for everyone. , I hope it will be helpful to everyone in the future.

Related articles:

Implementing todolist through vue vuex (detailed tutorial)

Use vue to implement how to display in the table , take the id of each row (detailed tutorial)

How to implement the QQ side menu using the vue mobile UI framework (detailed tutorial)

The above is the detailed content of vue.js method to move the array position and update the view at the same time. For more information, please follow other related articles on the PHP Chinese website!