vue中怎么设置select默认选中

Question

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...
    });
}

};

Answer 1

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

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

Answer 2

多看文档，官网例子都有：
选择列表

<div id="app">
  <select v-model="selected">
    <option v-for="opt in options" v-bind:value="opt.value">{{opt.text}}</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

var options = [
  { text: 'A-label', value: 'A' },
  { text: 'B-label', value: 'B' },
  { text: 'C-label', value: 'C' }
];
new Vue({
  el: '#app',
  data: {
    selected: 'A',
    options: []
  },
  created: function(){
    this.options = options;
  }
})

Answer 3

select标签给一个默认值，选项中有匹配的就会默认选中

Answer 4

可以在select上的v-model绑定参数，用data设置，或者是通过option的value。

Answer 5

如果用1的话，可以用做个filter
官网的demo 是一个真实值时
很多情况 数据是没有值或第一次 为空的值的时候
这个可以做个filter 你把默认值 放上去 写个就行了