Vue設置select下拉框的默認選項詳解(select空白bug解決)

最近在用vue設置表單數據時發現瞭一個小問題:用vue動態渲染select下拉框時,select下拉框會出現空白的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: '數學' }, { name: '英語' }],
            select:''
        }
    }
</script>

Bug如下:

明明有一個selected的option選項,為什麼會是一片空白呢?其實原因很簡單,就一句話:<select>的v-model變量是空的。

這句話一出可能很多人都恍然大悟瞭,v-model指令是雙向數據流動,vue變量沒有值,那麼select框當然也是空白的嘍。 

可是另一個問題來瞭,為什麼其他的表單不會這樣呢?

單選框、多選框和輸入框雖然默認都是沒有值的,但是它們沒有值也不會影響它們的表現形式,因為它們本來就可以是空白的,隻有 <select> 標簽不行,必須要有一個值才可以。所以我們可能會忽略這點,忘瞭給 v-model 綁定的變量賦值,結果就是select標簽是一片空白。

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

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

到此為止,好像事件已經結束瞭,bug已經沒有瞭,然鵝還有一個小問題:

當你輸入完全正確的字符串時,select當然一切正常,然而如果你輸入的是一些亂七八糟的字符時,select仍然是一片空白。

select:'亂七八糟的sdsdf'

效果圖:

這是因為select綁定的vue變量必須和option中的value值絕對對應,否則就不會顯示option的文本元素。

那為什麼輸入 "請選擇您的科目" 就能顯示出來呢?我明明沒有給這個option指定value值啊,

原因是:select的某個option標簽在沒有指定value值時,option默認會把標簽內的文本內容當做自己的value值。

所以我們輸入的看似是 "請選擇您的科目" ,實際上輸入的是 第一個option的value值,所以select標簽就顯示出來第一個option的文本內容啦。

這也會引出這個bug的另一個觸發方式:當我們從後端接收到的value值為undefined時,我們將其渲染到select標簽上,也會引發<select>標簽顯示空白的bug,因為沒有哪個option的value值是undefined的。

但同時,我們也可以利用這個特性,手動的把第一個option的值設置為空,那麼即使vue變量沒有設置初識值,那麼也會顯示出來第一個option的文本內容。

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

此時即使與<select>綁定的變量為 ' ' ,也能顯示出來這個option的文本內容瞭。

至此,有關於vue和select空白的bug就講解完畢咯,總結如下:

  1. 之所以用v-model綁定的<select>標簽顯示空白,是因為vue變量 沒有指定默認值;其他表單元素不需要指定變量的默認值,是因為它們本來就可以是空白的。
  2. 解決方法有二:一、設置變量的默認值  二、設置默認的option的value值為空字符串   
  3. 當我們給vue變量一個指定的默認值,但該值無法和任何option的value值對應時,<select>標簽仍然會顯示一片空白,與<select>綁定的變量的值,必須要為某個option的value值才行!因為隻有這樣,<select>標簽才能顯示出option的文本內容。
  4. 沒有指定value值的option,其文本內容會自動成為這個option的value值。

總結

到此這篇關於Vue設置select下拉框的默認選項的文章就介紹到這瞭,更多相關Vue select下拉框默認選項內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: