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