vue.js moves the array position and updates the view in real time

This time I bring you vue.js to move the array position and update it in real timeView, vue.js moves the array position and updates it in real time What are the precautions of views? Here are practical cases, let’s take a look at them together.

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 positions of the arrays in options, which 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 his 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);

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related matters on the PHP Chinese website article!

Recommended reading:

How to deal with the option overlay of select

How to import the css library in vue.js

The above is the detailed content of vue.js moves the array position and updates the view in real time. For more information, please follow other related articles on the PHP Chinese website!