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

問題

先上代碼：

上圖是前端的H5頁面

下面是js代碼：

一眼看上好像也沒有什么問題。js 在初始化的時(shí)候，調(diào)用后臺(tái)接口，取到數(shù)據(jù)然后傳遞給vue里面定義的data里面。并且前端頁面除了select不能正常選中，其他的input 框的數(shù)據(jù)也都全部顯示出來了（因?yàn)樯婕耙恍C(jī)密的數(shù)據(jù)，所以還是涂鴉一下，主要還是把問題說清楚）

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

思考1：

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

思考2：

是不是我的變量名稱寫錯(cuò)了，檢查一遍肯定不是這個(gè)問題

思考3：

是不是后臺(tái)傳過來的值就是空的，然后進(jìn)行驗(yàn)證利用js的打印以及input框輸出

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

思考4：

是不是后臺(tái)的匹配的hyList沒有值呢？看了控制臺(tái)確實(shí)有值的，于是又再一次實(shí)驗(yàn)一下再vue 的data里面寫死了一個(gè)值

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

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

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

解決方案一：

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

解決方案二：

寫一個(gè)接口里面就可以了

總結(jié)：

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

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

最新評論