vue.js移動數(shù)組位置,同時更新視圖的方法
更新時間：2018年03月08日 10:14:46 作者：xiaoqiu_net
下面小編就為大家分享一篇vue.js移動數(shù)組位置,同時更新視圖的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
使用vue.js v-for綁定若干個選項，需要對選項進(jìn)行排序上下移動操作。
需要對options里面數(shù)組的位置進(jìn)行交換，通常是這樣來寫：
假設(shè)向前移動一個：
var index = this.options.indexOf(option); //獲取當(dāng)前選項對象在數(shù)組里面的索引。 var tempOption = this.options[index-1]; //存儲前一個 this.options[index-1] = option;(this.options[index]) this.options[index] = tempOption;
這樣的確改變了數(shù)組的順序，但是視圖卻沒有更新移動。詳見vue官網(wǎng)數(shù)組的描述.
解決辦法之一是改變他的對象，使用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移動數(shù)組位置,同時更新視圖的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Element UI table 順序拖動方式
這篇文章主要介紹了關(guān)于Element UI table 順序拖動方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue實(shí)現(xiàn)todolist刪除功能,，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue中如何去掉空格的方法實(shí)現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vue默認(rèn)插槽,具名插槽,作用域插槽定義及使用方法
這篇文章主要介紹了Vue默認(rèn)插槽,具名插槽,作用域插槽定義及使用方法,插槽的作用是在子組件中某個位置插入父組件的自定義html結(jié)構(gòu)和data數(shù)據(jù),下面詳細(xì)內(nèi)容需要的小伙伴可以參考一下2022-03-03
vue el-select綁定對象時,回顯內(nèi)容不正確,始終是最后一項的解決
這篇文章主要介紹了vue el-select綁定對象時,回顯內(nèi)容不正確,始終是最后一項的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vuex使用及持久化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue+el-upload實(shí)現(xiàn)多文件動態(tài)上傳
這篇文章主要為大家詳細(xì)介紹了vue+el-upload實(shí)現(xiàn)多文件動態(tài)上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue中的cookies緩存存值方式，超簡單！具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue-cli腳手架初始化項目各個文件夾用途,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
異步組件是 Vue.js 中提高應(yīng)用程序性能和加載速度的重要功能之一,在使用異步組件時,需要注意組件的加載時間、錯誤處理和命名規(guī)范等問題,本文將介紹 Vue.js 中異步組件的概念、優(yōu)勢以及如何使用異步組件,感興趣的朋友一起看看吧2023-10-10