vue.js - vue中怎么设置select默认选中

问题描述

问 题

1. 异步获取数据后，怎么设置select默认选择项

2. html代码
   <template>

   <div class="col-sm-6" id="J_group">
           <select v-model="dns.groupId" class="form-control" name="group"
                   v-on:change.prevent="selectGroup($event)">
             <optgroup label="选择组">
               <option v-for="group in groupList" v-bind:value="group.id">
                 {{ group.name }}
               </option>
             </optgroup>
             <optgroup label="创建新组">
               <option value="-1">创建新增</option>
             </optgroup>
           </select>
        </div>
        </template>

3. JS代码

export default {

data(){
  return {
    groupList: [],
   
  }
}
created: function () {
  this.$http.get('url', {}, {
      emulateJSON: true
    }).then(function (res) {
      this.groupList = res.body.data;
      // 设置选择项的code...
    });
}

};

解决方案

Select这个组件本身就是这个特点。想要把它的值默认为某个选项，就给与它绑定的变量赋予这个选项的值。

不管是vue,还是angular，还是什么别的框架，大致的原理是不变的。

这篇关于vue.js - vue中怎么设置select默认选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！