解決vue select當(dāng)前value沒有更新到vue對象屬性的問題
vue是一款輕量級的mvvm框架，追隨了面向?qū)ο笏枷耄沟脤嶋H操作變得方便，但是如果使用不當(dāng)，將會面臨著到處踩坑的危險，寫這篇文章的目的是我遇到的這個問題在網(wǎng)上查了半天也沒有發(fā)現(xiàn)解決方案，最終研究了vue的源碼中有關(guān)select元素的部分找到了答案，下面簡單介紹我踩的關(guān)于select的一個坑：
使用場景：有兩個select元素，一個select元素變動時，動態(tài)修改另一個select中填充的內(nèi)容，并默認(rèn)選擇第一項，問題來了，每次當(dāng)我提交form數(shù)據(jù)時發(fā)現(xiàn)：從slave元素對應(yīng)的數(shù)據(jù)沒有更新到響應(yīng)vue對象相關(guān)屬性，奇怪的是當(dāng)我使用jquery獲取該select的val()方法獲取的是最新的數(shù)據(jù)，那么問題就來了：為什么元素的值發(fā)生了變動卻沒有更新到vue對象相關(guān)屬性？
vue中相關(guān)源碼：
// attach listener
this.listener = function () {
var value = getValue(el, multiple);
value = self.params.number ? isArray(value) ? value.map(toNumber) : toNumber(value) : value;
self.set(value);
};
this.on('change', this.listener);
看到了吧，只有select的change事件才會觸發(fā)select元素的value值更新到vue對象相關(guān)屬性，但我在使用select時從select的內(nèi)容是我使用js代碼追加的，選擇第一項也是代碼追加，這樣就沒有觸發(fā)vue中select的listener 函數(shù)，當(dāng)然這種情況僅僅出現(xiàn)在保存數(shù)據(jù)時沒有改變從select內(nèi)容而采用默認(rèn)第一項，所以如果用戶選擇select的其他項后再切回第一項就可以觸發(fā)該事件完成vue對象屬性變更。
上面的解決方案不夠友好，使用者會反感這種操作，那么如何解決呢？
我這里給出我的解決方案：在使用js代碼追加內(nèi)容到從select后，使用更改從select對應(yīng)的vue對象屬性來實現(xiàn)默認(rèn)選擇第一項。
以上這篇解決vue select當(dāng)前value沒有更新到vue對象屬性的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中使用gantt-elastic實現(xiàn)可拖拽甘特圖的示例代碼
這篇文章主要介紹了vue中使用gantt-elastic實現(xiàn)可拖拽甘特圖,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁面,前面加默認(rèn)域名端口的問題
這篇文章主要介紹了解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁面,前面加默認(rèn)域名端口的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue用this.$set改變數(shù)組里的某個值,文中通過示例代碼介紹了vue中this.$set()的用法----更新數(shù)組和對象的值，需要的朋友可以參考下2022-12-12
Vue中mixins的使用方法以及實際項目應(yīng)用指南
vue中提供了一種混合機(jī)制--mixins,用來更高效的實現(xiàn)組件內(nèi)容的復(fù)用,下面這篇文章主要給大家介紹了關(guān)于Vue中mixins的使用方法以及實際項目應(yīng)用指南,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Ant Design Upload 文件上傳功能的實現(xiàn)
這篇文章主要介紹了Ant Design Upload 文件上傳功能的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue實現(xiàn)骨架屏的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了vue-cli3打包時圖片壓縮處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
在Vue進(jìn)行前端開發(fā)中,條件判斷主要用于根據(jù)不同的條件來決定顯示或隱藏,或者進(jìn)行視圖之間的切換,這篇文章主要給大家介紹了關(guān)于Vue條件判斷之循環(huán)舉例詳解的相關(guān)資料,需要的朋友可以參考下2024-07-07
Vue+Node實現(xiàn)大文件上傳和斷點續(xù)傳
文件上傳在很多項目中都用的到，如果是幾M的很快就傳送完畢，如果是大文件呢？本文將利用Vue+Node實現(xiàn)大文件上傳和斷點續(xù)傳，感興趣的可以了解一下2022-04-04
VueJs里利用CryptoJs實現(xiàn)加密及解密的方法示例
這篇文章主要介紹了VueJs里利用CryptoJs實現(xiàn)加密及解密的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04