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

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} когда данные не установлены.

Answer 2

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

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

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

Answer 3

Если ваши параметры хранятся в свойстве, которое загружается динамически:

• вычисляемое свойство
• асинхронное вычисление (с использованием плагина AsyncComputed)
• через реквизиты, которые могут меняться

Тогда ты можешь @Watchсвойство для установки первого параметра. Таким образом поведение выбора первого элемента отделено от загрузки данных, и ваш код становится более понятным.

Пример использования Typescript и @AsyncComputed

      export default class PersonComponent extends Vue {
  selectedPersonId: string = undefined;

  // ...

  // Example method that loads persons data from API
  @AsyncComputed()
  async persons(): Promise<Person[]> {
    return await apiClient.persons.getAll();
  }

  // Computed property that transforms api data to option list
  get personSelectOptions() {
     const persons = this.persons as Person[];
     return persons.map((person) => ({
       text: person.name,
       value: person.id
     }));
  }

  // Select the first person in the options list whenever the options change
  @Watch('personSelectOptions')
  automaticallySelectFirstPerson(persons: {value: string}[]) {
     this.selectedPersonId = persons[0].value;
  }
}