vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法

更新時(shí)間：2018年03月08日 10:14:46 作者：xiaoqiu_net

下面小編就為大家分享一篇vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

使用vue.js v-for綁定若干個(gè)選項(xiàng)，需要對(duì)選項(xiàng)進(jìn)行排序上下移動(dòng)操作。

需要對(duì)options里面數(shù)組的位置進(jìn)行交換，通常是這樣來寫：

假設(shè)向前移動(dòng)一個(gè)：

var index = this.options.indexOf(option); //獲取當(dāng)前選項(xiàng)對(duì)象在數(shù)組里面的索引。
var tempOption = this.options[index-1]; //存儲(chǔ)前一個(gè)
this.options[index-1] = option;(this.options[index])
this.options[index] = tempOption;

這樣的確改變了數(shù)組的順序，但是視圖卻沒有更新移動(dòng)。詳見vue官網(wǎng)數(shù)組的描述.

解決辦法之一是改變他的對(duì)象，使用vue的set方法：

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

以上這篇vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

關(guān)于Element UI table 順序拖動(dòng)方式
這篇文章主要介紹了關(guān)于Element UI table 順序拖動(dòng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue實(shí)現(xiàn)todolist刪除功能
這篇文章主要介紹了Vue實(shí)現(xiàn)todolist刪除功能,，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-06-06
vue中如何去掉空格的方法實(shí)現(xiàn)
這篇文章主要介紹了vue中如何去掉空格的方法實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
Vue默認(rèn)插槽,具名插槽,作用域插槽定義及使用方法
這篇文章主要介紹了Vue默認(rèn)插槽,具名插槽,作用域插槽定義及使用方法,插槽的作用是在子組件中某個(gè)位置插入父組件的自定義html結(jié)構(gòu)和data數(shù)據(jù),下面詳細(xì)內(nèi)容需要的小伙伴可以參考一下
2022-03-03
vue el-select綁定對(duì)象時(shí),回顯內(nèi)容不正確,始終是最后一項(xiàng)的解決
這篇文章主要介紹了vue el-select綁定對(duì)象時(shí),回顯內(nèi)容不正確,始終是最后一項(xiàng)的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vuex使用及持久化方式
這篇文章主要介紹了vuex使用及持久化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue+el-upload實(shí)現(xiàn)多文件動(dòng)態(tài)上傳
這篇文章主要為大家詳細(xì)介紹了vue+el-upload實(shí)現(xiàn)多文件動(dòng)態(tài)上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
vue中的cookies緩存存值方式超簡(jiǎn)單
這篇文章主要介紹了vue中的cookies緩存存值方式，超簡(jiǎn)單！具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue-cli腳手架初始化項(xiàng)目各個(gè)文件夾用途
這篇文章主要介紹了vue-cli腳手架初始化項(xiàng)目各個(gè)文件夾用途,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01
Vue.js 中的異步組件是什么及使用異步組件的示例
異步組件是 Vue.js 中提高應(yīng)用程序性能和加載速度的重要功能之一,在使用異步組件時(shí),需要注意組件的加載時(shí)間、錯(cuò)誤處理和命名規(guī)范等問題,本文將介紹 Vue.js 中異步組件的概念、優(yōu)勢(shì)以及如何使用異步組件,感興趣的朋友一起看看吧
2023-10-10