(详解)Vue设置select下拉框的默认选项(解决select空白的bug)

最近在用vue设置表单数据时发现了一个小问题:用vue动态渲染select下拉框时,select下拉框会出现空白的bug。



Bug如下:

(详解)Vue设置select下拉框的默认选项(解决select空白的bug)_第1张图片

明明有一个selected的option选项,为什么会是一片空白呢?其实原因很简单,就一句话: 标签不行,必须要有一个值才可以。所以我们可能会忽略这点,忘了给 v-model 绑定的变量赋值,结果就是select标签是一片空白。

解决方法很简单:就是把v-model绑定的变量赋值即可。

select:'请选择您的科目'  // select是 标签显示空白的bug,因为没有哪个option的value值是undefined的。

但同时,我们也可以利用这个特性,手动的把第一个option的值设置为空,那么即使vue变量没有设置初识值,那么也会显示出来第一个option的文本内容。


此时即使与标签显示空白,是因为vue变量 没有指定默认值;其他表单元素不需要指定变量的默认值,是因为它们本来就可以是空白的。

  • 解决方法有二:一、设置变量的默认值  二、设置默认的option的value值为空字符串   
  • 当我们给vue变量一个指定的默认值,但该值无法和任何option的value值对应时,绑定的变量的值,必须要为某个option的value值才行!因为只有这样,