Bootstrap-vue：在 <b-form-select> 中自动选择第一个硬编码的 <option>

Question

我将 b-form-select 与服务器端生成的选项标签一起使用：

        <b-form-select :state="errors.has('type') ? false : null"
                       v-model="type"
                       v-validate="'required'"
                       name="type"
                       plain>
            <option value="note" >Note</option>
            <option value="reminder" >Reminder</option>
        </b-form-select>

当没有为此字段设置数据时，我想自动选择列表中的第一个选项。

这可能吗？我还没有找到如何从我的 Vue 实例中访问组件的选项。

Answer 1

您v-model应该具有第一个选项的价值。

例子

<template>
  <div>
    <b-form-select v-model="selected" :options="options" />

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'a',
        options: [
          { value: null, text: 'Please select an option' },
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Selected Option' },
          { value: { C: '3PO' }, text: 'This is an option with object value' },
          { value: 'd', text: 'This one is disabled', disabled: true }
        ]
      }
    }
  }
</script>

this.selected=${firstOptionValue}没有设置数据时可以触发。