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