前言

首先和浏览到这篇文章的朋友问声好，我是刚进入前端没多久的一个小白，喜欢分享一下自己在工作中遇到的问题与信德，希望大家能够多多指点。

下面就言归正传了！

一、vue中select的option默认选中项的问题

vue中select的option默认选中项的解决，我遇到的问题是，无法给option设置默认值，百度了一番各种大神的解决方案始终无效！

尝试过的解决方案有：

1、html代码如下，通过v-model可以获取到选中的值，如果option中存在value属性，优先获取value值即item.code，如果不存在，则获取option的文本内容，也就是下面代码中coupon.name.

首先说明，html这样写没有任何问题，动态的select的正确使用方法就是这样。

但是我始终无法给option设置初始值。

设置option默认值（失败代码示例）：

<select class="select-language" name="" v-model="datas.selectLanguage"><optionv-for="item in language":key="item.code":value="item.code":label="item.enG_DESC"></option>
</select>

   this.getLanguage(query).then((result) => {this.language = result.data.language;this.language.forEach((item) => {if (item.isdefault === 1) {this.datas.selectLanguage = item.code;return;}});});

二、解决方案

1.在mounted请求数据的方法中添加this.$nextTick()

代码如下（成功示例）

   this.getLanguage(query).then((result) => {this.language = result.data.language;this.language.forEach((item) => {if (item.isdefault === 1) {this.$nextTick(() => {//添加完以后this.datas.selectLanguage = item.code;});return;}});});

2.个人分析

1、当没有绑定v-model，直接给对应的option加selected属性，目前的这个小功能通过selected三目运算同样可以实现；

2、当给select绑定了v-model的值的时候，要给v-model绑定的datas.selectdanguage值里写默认值;

因为我目前option遍历的数据是通过接口请求来的，所以使用以上的两种办法是有问题的，需要在请求数据的代码里加上 this.$nextTick(callback);为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 this.$nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用,并且回调函数中的 this 将自动绑定到当前的 Vue 实例上;

总结

以上就是我个人的一些简单总结；

曾参考大神Demo链接：https://blog.csdn.net/weixin_36810906/article/details/87877753

vue中select的option默认选中项的问题解决方案相关推荐

vue中单选框设置默认选中值
vue中单选框的默认选中不同于传统方式设置checked,是通过在data中设置vulue来实现的 html部分是通过v-for取的后台的数据 <li v-for="(value,i) ...
HTML中select的option设置selected=“selected“无效的解决方案
HTML中select的option设置selected="selected"无效的解决方案参考文章: (1)HTML中select的option设置selected=" ...
vue 中使用element-ui的menu选中项高亮的问题
在使用element中的menu组件时,根据官方文档,可以设置给el-menu设置router属性为:true,给el-menu-item设置index的值为路径,就可以实现点击导航跳转到指定路由. ...
Vue中select下拉框的默认选中项的三种情况
在Vue中使用select下拉框主要靠的是 v-model 来绑定选项 option 的 value 值. select下拉框在界面的展示,我们都希望看到框中有一个值而不是空白,比如显示 &qu ...
select html默认选中的值,HTML/jquery中的select标签设置默认选中取值
一.jQuery中的select标签设置默认选中取值每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如 1.设置value为pxx的项选中 $(" ...
php option默认选中的值,laravel中数据显示方法(默认值和下拉option默认选中)
今天小编就为大家分享一篇laravel中数据显示方法(默认值和下拉option默认选中),具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧如下所示: ap状态: 进行中开始暂停开 ...
php 下拉框默认选中,select标签设置默认选中的选项方法，select标签
select标签设置默认选中的选项方法,select标签方法有两种. 第一种通过的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. < select id = &qu ...
动态给下拉框，单选框赋值，设置默认选中项的几种方法
selectId为select的id $('#selectId')[0].selectedIndex = 0; //根据索引来赋值 $('#selectId').val('val值'); //根据va ...
vue中使用baidushare分享到微信无法显示bug解决方案
vue中使用baidushare分享到微信无法显示bug解决方案参考文章: (1)vue中使用baidushare分享到微信无法显示bug解决方案 (2)https://www.cnblogs.co ...
Vue 中select option默认选中的处理方法
在做泰康项目的时候有个需求就是要给select默认选中的样式我的处理方法有两个 1.直接将默认值给 selectedOption <select v-model="selectedO ...

vue中select的option默认选中项的问题解决方案

前言

一、vue中select的option默认选中项的问题

二、解决方案

1.在mounted请求数据的方法中添加this.$nextTick()

2.个人分析

总结

vue中select的option默认选中项的问题解决方案相关推荐

最新文章

热门文章