最近在用vue設(shè)置表單數(shù)據(jù)時(shí)發(fā)現(xiàn)了一個(gè)小問題：用vue動(dòng)態(tài)渲染select下拉框時(shí)，select下拉框會(huì)出現(xiàn)空白的bug。

<template>
  <div>
    <select name="art-cate" v-model="select">
        <option disabled selected style="display: block;">請選擇您的科目</option>
        <option v-for="(item,index) in arr " 
                :key="index" 
                :value="item.name">{{item.name}}</option>
    </select>
  </div>
</template>
 
<script>
export default {
    data() {
        return {
            arr: [{ name: '語文' }, { name: '數(shù)學(xué)' }, { name: '英語' }],
            select:''
        }
    }
</script>

Bug如下：

明明有一個(gè)selected的option選項(xiàng)，為什么會(huì)是一片空白呢？其實(shí)原因很簡單，就一句話：<select>的v-model變量是空的。

這句話一出可能很多人都恍然大悟了，v-model指令是雙向數(shù)據(jù)流動(dòng)，vue變量沒有值，那么select框當(dāng)然也是空白的嘍。 

可是另一個(gè)問題來了，為什么其他的表單不會(huì)這樣呢？

單選框、多選框和輸入框雖然默認(rèn)都是沒有值的，但是它們沒有值也不會(huì)影響它們的表現(xiàn)形式，因?yàn)樗鼈儽緛砭涂梢允强瞻椎?，只?<select> 標(biāo)簽不行，必須要有一個(gè)值才可以。所以我們可能會(huì)忽略這點(diǎn)，忘了給 v-model 綁定的變量賦值，結(jié)果就是select標(biāo)簽是一片空白。

解決方法很簡單：就是把v-model綁定的變量賦值即可。

select:'請選擇您的科目'  // select是 <select>標(biāo)簽 雙向綁定的變量

到此為止，好像事件已經(jīng)結(jié)束了，bug已經(jīng)沒有了，然鵝還有一個(gè)小問題：

當(dāng)你輸入完全正確的字符串時(shí)，select當(dāng)然一切正常，然而如果你輸入的是一些亂七八糟的字符時(shí)，select仍然是一片空白。

select:'亂七八糟的sdsdf'

效果圖：

這是因?yàn)閟elect綁定的vue變量必須和option中的value值絕對對應(yīng)，否則就不會(huì)顯示option的文本元素。

那為什么輸入 "請選擇您的科目" 就能顯示出來呢？我明明沒有給這個(gè)option指定value值啊，

原因是：select的某個(gè)option標(biāo)簽在沒有指定value值時(shí)，option默認(rèn)會(huì)把標(biāo)簽內(nèi)的文本內(nèi)容當(dāng)做自己的value值。

所以我們輸入的看似是 "請選擇您的科目" ，實(shí)際上輸入的是 第一個(gè)option的value值，所以select標(biāo)簽就顯示出來第一個(gè)option的文本內(nèi)容啦。

這也會(huì)引出這個(gè)bug的另一個(gè)觸發(fā)方式：當(dāng)我們從后端接收到的value值為undefined時(shí)，我們將其渲染到select標(biāo)簽上，也會(huì)引發(fā)<select>標(biāo)簽顯示空白的bug，因?yàn)闆]有哪個(gè)option的value值是undefined的。

但同時(shí)，我們也可以利用這個(gè)特性，手動(dòng)的把第一個(gè)option的值設(shè)置為空，那么即使vue變量沒有設(shè)置初識(shí)值，那么也會(huì)顯示出來第一個(gè)option的文本內(nèi)容。

<option value="">請選擇您的科目</option>

此時(shí)即使與<select>綁定的變量為 ' ' ，也能顯示出來這個(gè)option的文本內(nèi)容了。

至此，有關(guān)于vue和select空白的bug就講解完畢咯，總結(jié)如下：

1. 之所以用v-model綁定的<select>標(biāo)簽顯示空白，是因?yàn)関ue變量 沒有指定默認(rèn)值；其他表單元素不需要指定變量的默認(rèn)值，是因?yàn)樗鼈儽緛砭涂梢允强瞻椎摹?/li>
2. 解決方法有二：一、設(shè)置變量的默認(rèn)值  二、設(shè)置默認(rèn)的option的value值為空字符串   
3. 當(dāng)我們給vue變量一個(gè)指定的默認(rèn)值，但該值無法和任何option的value值對應(yīng)時(shí)，<select>標(biāo)簽仍然會(huì)顯示一片空白，與<select>綁定的變量的值，必須要為某個(gè)option的value值才行！因?yàn)橹挥羞@樣，<select>標(biāo)簽才能顯示出option的文本內(nèi)容。
4. 沒有指定value值的option，其文本內(nèi)容會(huì)自動(dòng)成為這個(gè)option的value值。

總結(jié)

到此這篇關(guān)于Vue設(shè)置select下拉框的默認(rèn)選項(xiàng)的文章就介紹到這了,更多相關(guān)Vue select下拉框默認(rèn)選項(xiàng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論