Vue設定select下拉框的預設選項詳解(select空白bug解決)

2022-12-11 14:01:21

最近在用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就講解完畢咯，總結如下：

之所以用v-model繫結的<select>標籤顯示空白，是因為vue變數沒有指定預設值；其他表單元素不需要指定變數的預設值，是因為它們本來就可以是空白的。
解決方法有二：一、設定變數的預設值二、設定預設的option的value值為空字串
當我們給vue變數一個指定的預設值，但該值無法和任何option的value值對應時，<select>標籤仍然會顯示一片空白，與<select>繫結的變數的值，必須要為某個option的value值才行！因為只有這樣，<select>標籤才能顯示出option的文字內容。
沒有指定value值的option，其文字內容會自動成為這個option的value值。

總結

到此這篇關於Vue設定select下拉框的預設選項的文章就介紹到這了,更多相關Vue select下拉框預設選項內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue設定select下拉框的預設選項詳解(select空白bug解決)

熱門文章