vue select下拉框数据v-model绑定默认不显示的问题

提高页面加载速度，前端代码注意的关键点今天遇到了一个问题，就是我循环出select内的数据以后，发现原本默认显示第一条的select框变成了空白，要选择后才有显示。我写的原始代码如下：

<select v-model="token"><option v-for="(item,index) in list" :value="index" :key="index">{{item}}</option>
</select><script>
export default {data() {return {token:'BNB'list: {1001:'NOW-E68',1002:'MITH-C76',1003:'SPNDB-916',1004:'BNB',},}}

vue中的select通过v-model可以获取到选中的值，如果option中存在value属性，优先获取value值即代码中的1004，如果不存在，则获取option的文本内容，也就是上面代码中的BNB。
造成默认不显示的原因是v-model获取的token在option的value中匹配不到。因此可以选择去掉option中的value属性或者将v-model中的token值改为list的索引即1004

修改后的代码如下：

<select v-model="token"><option v-for="(item,index) in list" :value="index" :key="index">{{item}}</option>
</select><script>
export default {data() {return {token:'1004'list: {1001:'NOW-E68',1002:'MITH-C76',1003:'SPNDB-916',1004:'BNB',},}}

我的个人博客,有空来坐坐

http://www.wangyanan.online

vue select下拉框数据v-model绑定默认不显示的问题相关推荐

angular:带验证功能的formControlName的select下拉框数据充填
解决方法: 使用一个自定义函数进行设定. FormGroup定义之后,进行初始化,用于表单验证. ngOnInit(): void {console.log("----->" ...
python获取select选中的值_Python3.x：遍历select下拉框获取value值
Python3.x:遍历select下拉框获取value值 Select提供了三种选择方法: # 通过选项的顺序,第一个为 0 select_by_index(index) # 通过value属性 s ...
vue 的elementui中select下拉框多选项-multiple属性
vue的select下拉框多选项-multiple属性最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台,使用起来其实还挺方便的,大部分的组件源码里面都已经写好了, ...
antd vue 多个下拉联动_antd中select下拉框值为对象选中的问题
使用antd中的select下拉框,遇到个小问题,后台管理系统中,使用下拉框,一般不会是简单的就直接使用select中的value值,而是会使用id或者value中文对应的keyword,并且这个在o ...
vue elementUI select下拉框设置默认值
关于element select框默认值赋值不成功问题,注意两点: v-model里面的数据和遍历出来value值数据类型不一样.!!!! (例:item.provinces类型是number,pro ...
Vue中select下拉框的默认选中项的三种情况
在Vue中使用select下拉框主要靠的是 v-model 来绑定选项 option 的 value 值. select下拉框在界面的展示,我们都希望看到框中有一个值而不是空白,比如显示 &qu ...
bootstrap select下拉框模糊搜索和动态绑定数据解决方法
bootstrap select下拉框模糊搜索和动态绑定数据解决方法参考文章: (1)bootstrap select下拉框模糊搜索和动态绑定数据解决方法 (2)https://www.cnblog ...
Vue+EleMentUI实现el-table-colum表格select下拉框可编辑
说明: 在进行采购入库的过程中,有必要对表格中的一行进行快速编辑保存,节省时间,提高工作效率!,而不是每次编辑都要弹窗才可编辑源码:https://gitee.com/charlinchenlin/ ...
bootstrap获取下拉框数据_bootstrap动态调用select下拉框的实现方法
bootstrap动态调用select下拉框的实例代码 html代码: 填报部门: JS代码: /*获取下拉菜单*/ function showSel(){ $.ajax({ "type&q ...

vue select下拉框数据v-model绑定默认不显示的问题

我的个人博客,有空来坐坐

vue select下拉框数据v-model绑定默认不显示的问题相关推荐

最新文章

热门文章