筆者今天在開發(fā)中遇到一個看起來很神奇的問題，平時編輯的頁面我們select下拉選框利用vue.js 的v-model來實現(xiàn)自動選中，今天無論如何都選不中，后來經過很久的復查和大神的一句話終于解決這個這個問題，順便分享一下。

問題

先上代碼：

上圖是前端的H5頁面

下面是js代碼：

一眼看上好像也沒有什么問題。js 在初始化的時候，調用后臺接口，取到數據然后傳遞給vue里面定義的data里面。并且前端頁面除了select不能正常選中，其他的input 框的數據也都全部顯示出來了（因為涉及一些機密的數據，所以還是涂鴉一下，主要還是把問題說清楚）

按照常理來說是不可能出現(xiàn)這個問題，畢竟之前在其他的項目也做過類似的。于是就開始查找問題了。

思考1：

是不是vue.js的版本問題導致的，后來換了版本發(fā)現(xiàn)還是不行這個假設不成立

思考2：

是不是我的變量名稱寫錯了，檢查一遍肯定不是這個問題

思考3：

是不是后臺傳過來的值就是空的，然后進行驗證利用js的打印以及input框輸出

發(fā)現(xiàn)頁面上也是能顯示出來了，然后又排除了這個原因。

思考4：

是不是后臺的匹配的hyList沒有值呢？看了控制臺確實有值的，于是又再一次實驗一下再vue 的data里面寫死了一個值

然后前端去v-model="hy"也可以默認選中。這時候我就非常的納悶了，咋回事了呢？后面隨手改一下數據把hy:"8082"改成hy:8082發(fā)現(xiàn)，咦？選不中了，是不是值類型不匹配導致的前端不能默認選中。幸喜了一下，以為找到問題，后面經過校驗發(fā)現(xiàn)也不是這個問題（此過程省略500字），又失望了一下。

突然，在舉手無措的時候，狂刷頁面，有一次我竟然看見默認選中，于是我又陷入了深深的思考，這不會是靈異事件吧！一看時間不早了，同事都已經下班走了，而我秉著有些問題老是去想，想不到，還不如路上想想或許就想通了，確實下班的路上一直在想這個問題（然而并沒有想到什么，哈哈）

回到家，依然打開電腦，在那里狂刷頁面，還是期待著能夠出現(xiàn)一次默認選中的，終于皇天不負有心人，出來了。出來是出來了，還是沒有任何進程。無奈，去問一下以前在一起的一位前端大神吧！霹靂吧啦在qq上的把問題描述了一遍，大神說代碼貼出來看看，而后，大神的第一句話就是，你這么寫代碼的第一次見，果然騷操作。大神說你調接口是ajax異步的。我突然明白了，原來我分別調了兩次接口，獲取行業(yè)列表是一個接口，獲取基本信息的行業(yè)是一個接口，ajax 的異步調用，雖然在js 的初始化的是時候去調用了，但是可能基本信息先數據出來了，行業(yè)列表的信息還沒有出來，導致前端不能默認選中的原因。

解決方案一：

把兩個異步請求放在vue的mounted生命周期中，注意，一定先調行業(yè)列表的數據，后調基本信息數據

解決方案二：

寫一個接口里面就可以了

總結：

主要是對于一些技術點還是停留在會用的階段，不過對于ajax這個問題沒有注意到確實不應該啊，平時總是霹靂吧啦的打代碼。這次踩的這個坑，算是一種成長了，平時也是多注意的一些細節(jié)的問題的。

以上這篇vue.js 解決v-model讓select默認選中不生效的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論