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

問題

先上程式碼：

上圖是前端的H5頁面

下面是js程式碼：

一眼看上好像也沒有什麼問題。js 在初始化的時候，呼叫後臺介面，取到資料然後傳遞給vue裡面定義的data裡面。並且前端頁面除了select不能正常選中，其他的input 框的資料也都全部顯示出來了（因為涉及一些機密的資料，所以還是塗鴉一下，主要還是把問題說清楚）

按照常理來說是不可能出現這個問題，畢竟之前在其他的專案也做過類似的。於是就開始查詢問題了。

思考1：

是不是vue.js的版本問題導致的，後來換了版本發現還是不行這個假設不成立

思考2：

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

思考3：

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

發現頁面上也是能顯示出來了，然後又排除了這個原因。

思考4：

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

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

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

回到家，依然開啟電腦，在那裡狂刷頁面，還是期待著能夠出現一次預設選中的，終於皇天不負有心人，出來了。出來是出來了，還是沒有任何程序。無奈，去問一下以前在一起的一位前端大神吧！霹靂吧啦在qq上的把問題描述了一遍，大神說程式碼貼出來看看，而後，大神的第一句話就是，你這麼寫程式碼的第一次見，果然騷操作。大神說你調介面是ajax非同步的。我突然明白了，原來我分別調了兩次介面，獲取行業列表是一個介面，獲取基本資訊的行業是一個介面，ajax 的非同步呼叫，雖然在js 的初始化的是時候去呼叫了，但是可能基本資訊先資料出來了，行業列表的資訊還沒有出來，導致前端不能預設選中的原因。

解決方案一：

把兩個非同步請求放在vue的mounted生命週期中，注意，一定先調行業列表的資料，後調基本資訊資料

解決方案二：

寫一個接口裡面就可以了

總結：

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

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