(Detailed explanation) Vue sets the default option of the select drop-down box (solves the bug of selecting blank)

Recently, I found a small problem when using vue to set form data: when using vue to dynamically render the select drop-down box, the select drop-down box will have a blank 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>

The bugs are as follows:

Obviously there is a selected option option, why is it blank? In fact, the reason is very simple, just one sentence: The v-model variable of <select> is empty.

As soon as this sentence comes out, many people may suddenly realize that the v-model command is a two-way data flow, and the vue variable has no value, so the select box is of course blank. 

But here comes another question, why don't other forms do this?

Although the radio box, multi-select box and input box have no value by default, they have no value and will not affect their presentation, because they can be blank, only the <select> tag can not, it must have Only one value will do. So we may ignore this and forget to assign values ​​​​to the variables bound by v-model. The result is that the select tag is blank.

The solution is very simple: just assign the variable bound to v-model.

select:'请选择您的科目'  // select是 <select>标签 双向绑定的变量

So far, it seems that the incident is over and the bug is gone, but there is still a small problem:

When you enter a completely correct string, select is of course all right, but if you enter some messy characters, select is still blank.

select:'乱七八糟的sdsdf'

Renderings:

This is because the vue variable bound by select must correspond absolutely to the value in option, otherwise the text element of option will not be displayed.

Then why is it displayed after entering "Please select your subject"? I obviously did not specify a value for this option,

The reason is: When an option tag of select does not specify a value, the option will take the text content in the tag as its own value by default.

So what we input seems to be "Please select your subject", but in fact we input the value of the first option , so the select tag displays the text content of the first option.

This will also lead to another triggering method of this bug: when we receive the value value undefined from the backend, we render it on the select tag, which will also cause the bug that the <select> tag displays blank, because there is no The value of option is undefined.

But at the same time, we can also take advantage of this feature to manually set the value of the first option to empty, so even if the Vue variable does not have an initial value, the text content of the first option will be displayed.

<option value="">请选择您的科目</option>

At this time, even if the variable bound to <select> is ' ', the text content of this option can be displayed.

So far, the bugs about vue and select blanks have been explained, and the summary is as follows:

1. The reason why the <select> tag bound by v-model is blank is because the vue variable does not specify a default value; other form elements do not need to specify the default value of the variable because they can be blank.
2. There are two solutions: 1. Set the default value of the variable 2. Set the value of the default option to an empty string   
3. When we give the vue variable a specified default value, but the value cannot correspond to the value of any option, the <select> tag will still display a blank, and the value of the variable bound to <select> must be a certain value The value of option will do! Because only in this way, the <select> tag can display the text content of the option.
4. For an option without a specified value, its text content will automatically become the value of this option.

I hope the above things will be helpful to you. There are still some front-end pits in my stumbling block column. The front-end knowledge is trivial and small, but programming cannot be sloppy. Sometimes we accidentally fall into it, and it is wasteful to get into the horns For most of the day, Xiaobai who is a beginner at the front end can come to my column to see more, so as to prevent falling into the pit, so that he can run fast and fast on the road to the front-end master.