vue怎么实现下拉默认选中（（详解）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就讲解完毕咯  


     


     


     


     

，总结如下：

之所以用v-model绑定的<select>标签显示空白


 




 




 




 




，是因为vue变量 没有指定默认值；其他表单元素不需要指定变量的默认值   

   

   

   

  ，是因为它们本来就可以是空白的                     。 解决方法有二：一  


     


     


     


     

、设置变量的默认值  二


 




 




 




 




、设置默认的option的value值为空字符串    当我们给vue变量一个指定的默认值   

     

     

     

     
，但该值无法和任何option的value值对应时



  




  




  




  




，<select>标签仍然会显示一片空白  


  


  


  


 ，与<select>绑定的变量的值    
     
     
     
     ，必须要为某个option的value值才行！因为只有这样




   




   




   




   




，<select>标签才能显示出option的文本内容
     



     



     



     



    。 没有指定value值的option 



 



 



 



，其文本内容会自动成为这个option的value值






















。

上面的东西希望对你有所帮助                         ，我的绊脚石专栏中还有一些前端方面的小坑




    




    




    




    



，前端的知识琐碎细小




















，然而编程容不得半点马虎                        ，有时候我们不小心掉进去 



     



     



     



     


，钻上牛角尖能耗费大半天的时间





















，初学前端的小白可以多来我的专栏中看看哦    
    
    
    
   ，防止掉坑  


     


     


     


     

，以便能在通向前端大神的路上风驰电掣   

   

   

   

  、疾行飞奔 
    
    
    
    
。