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就讲解完毕咯，总结如下：

  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下拉框默认选项内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue.js select下拉框绑定和取值方法

    最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 <select id="sendSybol" v-model="searchDto.sendSymbolId"> <option v-for="

  • Vue.js仿Select下拉框效果

    Vue.js仿Select下拉框效果

    本文实例为大家分享了Vue.js仿Select下拉框效果的具体代码,供大家参考,具体内容如下 废话少说,直接上图上代码: 效果图: HEML: <div id="demo"> <h2 class="title">自定义下拉框</h2> <imitate-select h2-value="第一个 Select" v-bind:list="list1"></imitate-se

  • Vue.js 2.0中select级联下拉框实例

    在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用.首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的全家桶. select首先要区分单选和多选,v-model在select单选和多选上有区别.     select单选实例: <select v-model="fruit"> <option selected valu

  • vue 不使用select实现下拉框功能(推荐)

    html部分:v-for循环出的结构 <div > <p @click="clickSize (item, index)">{{item.name}}</p> <transition name="opacityLeave"> <div class="condition-list" v-show="isShowSize && index == i"> &

  • 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> <opt

  • select下拉框插件jquery.editable-select详解

    项目中有个需求,下拉框既可以下拉选择,也可以手动填写 html代码 <span>数据来源</span> <select class="source"> <option value="0">人工导入</option> <option value="1">数据服务平台</option> </select> js代码 $('#noMean').editabl

  • 微信小程序下拉框组件使用方法详解

    本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等 一.省市三级联动使用 注意mode = region,以及value = "一维数组" //.wxml <picker mode="region" bindchange="bindViewEvent" data-model="component" data-me

  • bootstrap select下拉搜索插件使用方法详解

    bootstrap-select是boot的下拉搜索插件,使用的时候有时我们需要动态从后台 或者 直接加载动态数据. 下面是根据一级下拉菜单,动态加载二级联动方式.(不是ajax后台获取) 首先引入js与css文件(一个css两个js) <link rel="stylesheet" href="css/bootstrap-select.css" rel="external nofollow" > js省略 一.下拉搜索(html) &

  • 基于jQuery的select下拉框选择触发事件实例分析

    本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1

  • JavaScript实现获取select下拉框中第一个值的方法

    JavaScript实现获取select下拉框中第一个值的方法

    本文实例讲述了JavaScript实现获取select下拉框中第一个值的方法.分享给大家供大家参考,具体如下: 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

  • Angular.JS中select下拉框设置value的方法

    Angular.JS中select下拉框设置value的方法

    前言 本文主要给大家介绍的是关于Angular.JS中select下拉框设置value的相关内容,非常出来供大家参考学习,下面来一起看看详细的介绍: 最近在系统中增加一个查询的筛选条件,通过下拉框选取,用的是Angular常见的ng-options 指令: <select id="selectDetectUnit" class="form-control" ng-model="detectUnits" ng-options="de

  • 浅谈Vue Element中Select下拉框选取值的问题

    之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html: <el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> <el-option style="width: auto" :disabled="

  • Layui 设置select下拉框自动选中某项的方法

    1. 需求场景分析 用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A.在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值. 2. Layui的select下拉框是怎么实现的 为了获得一个select标配的下拉框,我们需要在html中填写的内容如下: <div class="layui-form-item"> <label class="layui-form-label"><span

随机推荐