前言

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

下面就言归正传了！

---

 

一、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