Bootstrap-vue: Автоматический выбор первого жестко заданного ‹option› в ‹b-form-select›

Я использую 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.


bootstrap-vue
person PeterB    schedule 28.02.2019    source источник

Ответы (2)


arrow_upward
5
arrow_downward

ваш 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}, когда данные не заданы.

person Digvijay    schedule 28.02.2019
comment
что, если мы не знаем, какой будет первый вариант. Список сформирован? - person user2353003; 05.05.2020

arrow_upward
0
arrow_downward

что делать, если мы не знаем, что это за первый вариант. Список сформирован?

если у вас есть динамические данные, что-то вроде этого будет работать.

<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: [],
      options: [],
    };
  },
  mounted: function() {
    this.getOptions();
  },
  methods: {
    getOptions() {
      //Your logic goes here for data fetch from API
      const options = res.data;
      this.options = res.data;
      this.selected = options[0].fieldName; // Assigns first index of Options to model
      return options;
    },
  },
};
</script>
person RBS    schedule 22.05.2020