vue是一款輕量級的mvvm框架，追隨了面向對象思想，使得實際操作變得方便，但是如果使用不當，將會面臨著到處踩坑的危險，寫這篇文章的目的是我遇到的這個問題在網上查了半天也沒有發現解決方案，最終研究了vue的源碼中有關select元素的部分找到了答案，下面簡單介紹我踩的關于select的一個坑：

使用場景：有兩個select元素，一個select元素變動時，動態修改另一個select中填充的內容，并默認選擇第一項，問題來了，每次當我提交form數據時發現：從slave元素對應的數據沒有更新到響應vue對象相關屬性，奇怪的是當我使用jquery獲取該select的val()方法獲取的是最新的數據，那么問題就來了：為什么元素的值發生了變動卻沒有更新到vue對象相關屬性？

vue中相關源碼：

// 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事件才會觸發select元素的value值更新到vue對象相關屬性，但我在使用select時從select的內容是我使用js代碼追加的，選擇第一項也是代碼追加，這樣就沒有觸發vue中select的listener 函數，當然這種情況僅僅出現在保存數據時沒有改變從select內容而采用默認第一項，所以如果用戶選擇select的其他項后再切回第一項就可以觸發該事件完成vue對象屬性變更。

上面的解決方案不夠友好，使用者會反感這種操作，那么如何解決呢？

我這里給出我的解決方案：在使用js代碼追加內容到從select后，使用更改從select對應的vue對象屬性來實現默認選擇第一項。

以上這篇解決vue select當前value沒有更新到vue對象屬性的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com