vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法
更新時(shí)間：2018年03月08日 10:14:46 作者：xiaoqiu_net
下面小編就為大家分享一篇vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
使用vue.js v-for綁定若干個(gè)選項(xiàng)，需要對選項(xiàng)進(jìn)行排序上下移動(dòng)操作。
需要對options里面數(shù)組的位置進(jìn)行交換，通常是這樣來寫：
假設(shè)向前移動(dòng)一個(gè)：
var index = this.options.indexOf(option); //獲取當(dāng)前選項(xiàng)對象在數(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ù)組的描述.
解決辦法之一是改變他的對象，使用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í)更新視圖的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中如何引入jest單元測試問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue 框架下自定義滾動(dòng)條(easyscroll)實(shí)現(xiàn)方法
這篇文章主要介紹了vue 框架下自定義滾動(dòng)條(easyscroll)實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
使用 filters 實(shí)現(xiàn)英文字母轉(zhuǎn)大寫，實(shí)現(xiàn)代碼超簡單，本文重點(diǎn)給大家介紹vue filters的使用，感興趣的朋友一起看看吧2018-06-06
這篇文章主要介紹了vue中使用微信公眾號(hào)js-sdk踩坑記錄，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
vue?Proxy數(shù)據(jù)代理進(jìn)行校驗(yàn)部分源碼實(shí)例解析
Proxy提供了強(qiáng)大的Javascript元編程,有許多功能,包括運(yùn)算符重載,對象模擬,簡潔而靈活的API創(chuàng)建,對象變化事件,甚至Vue 3背后的內(nèi)部響應(yīng)系統(tǒng)提供動(dòng)力,這篇文章主要給大家介紹了關(guān)于vue?Proxy數(shù)據(jù)代理進(jìn)行校驗(yàn)部分源碼解析的相關(guān)資料,需要的朋友可以參考下2022-01-01
Vue中如何使用ElementUI實(shí)現(xiàn)圖片上傳
這篇文章主要介紹了Vue中如何使用ElementUI實(shí)現(xiàn)圖片上傳,這里用了elementUI的一個(gè)簡單的例子，給大家介紹的非常詳細(xì)，需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue頁面使用多個(gè)定時(shí)器的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了vue表格顯示字符串過長的問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中使用el-table組件checkbox進(jìn)行分頁多選，回顯、切換分頁記住上一頁所勾選和取消的選項(xiàng)(示例代碼)
這篇文章主要介紹了vue中使用el-table組件checkbox進(jìn)行分頁多選，回顯、切換分頁記住上一頁所勾選和取消的選項(xiàng)本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
解決VUE 在IE下出現(xiàn)ReferenceError: Promise未定義的問題
這篇文章主要介紹了解決VUE 在IE下出現(xiàn)ReferenceError: Promise未定義的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11