解決vue select當(dāng)前value沒(méi)有更新到vue對(duì)象屬性的問(wèn)題
vue是一款輕量級(jí)的mvvm框架，追隨了面向?qū)ο笏枷?，使得?shí)際操作變得方便，但是如果使用不當(dāng)，將會(huì)面臨著到處踩坑的危險(xiǎn)，寫(xiě)這篇文章的目的是我遇到的這個(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)文章
laravel5.3 vue 實(shí)現(xiàn)收藏夾功能實(shí)例詳解
這篇文章主要介紹了laravel5.3 vue 實(shí)現(xiàn)收藏夾功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-01-01
vue項(xiàng)目實(shí)現(xiàn)登陸注冊(cè)效果
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)登陸注冊(cè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue項(xiàng)目打包清除console.log的四種方法總結(jié)
大家在項(xiàng)目開(kāi)發(fā)的時(shí)候,需要看看一些后端接口返回的結(jié)果,會(huì)多次使用console.log項(xiàng)目開(kāi)發(fā)完成打包的時(shí)候,發(fā)現(xiàn)控制臺(tái)一堆的console.log,非常頭疼,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包清除console.log的四種方法,需要的朋友可以參考下2023-04-04
vue3使用vue-cli引入windicss報(bào)錯(cuò)Can‘t resolve windi.css問(wèn)題
這篇文章主要介紹了vue3使用vue-cli引入windicss報(bào)錯(cuò)Can‘t resolve windi.css問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
解決vuex數(shù)據(jù)頁(yè)面刷新后初始化操作
這篇文章主要介紹了解決vuex數(shù)據(jù)頁(yè)面刷新后初始化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
本文將結(jié)合實(shí)例代碼，介紹Vue批量更新dom的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
本篇文章主要介紹了詳解基于vue-cli優(yōu)化的webpack配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要給大家介紹了關(guān)于如何基于Vue-cli快速搭建項(xiàng)目的完整步驟，文中通過(guò)示例代碼以及圖片將搭建的步驟一步步介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue+element樹(shù)形選擇器組件封裝和使用方式
這篇文章主要介紹了vue+element樹(shù)形選擇器組件封裝和使用方式，具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2020-04-04
在項(xiàng)目中經(jīng)常會(huì)遇到圖片上傳功能，今天腳本之家小編給大家?guī)?lái)了使用Vue實(shí)現(xiàn)圖片上傳的三種方式，感興趣的朋友一起看看吧2018-07-07