前言
首先和浏览到这篇文章的朋友问声好,我是刚进入前端没多久的一个小白,喜欢分享一下自己在工作中遇到的问题与信德,希望大家能够多多指点。
下面就言归正传了!
一、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"> <option v-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