vue.js moves array while updating view method

This article mainly shares 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. Let’s follow the editor to take a look, I hope it can help 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 vue’s set method:

##

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

Related recommendations:

Detailed explanation of the role of MySQL views (2) - filtering data, calculating fields, updating views

The above is the detailed content of vue.js moves array while updating view method. For more information, please follow other related articles on the PHP Chinese website!