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

Posted on by

最近在用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！

推薦閱讀：