CODEWITHSUNDEEP
bootstrap-vue
PeterB
PeterB

Reputation: 2330

Bootstrap-vue: Auto-select first hardcoded <option> in <b-form-select>

I'm using b-form-select with server-side generated option tags:

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

When no data is set for this field I want to auto-select the first option in the list.

Is this possible? I have not found how to access the component's options from within my Vue instance.

Upvotes: 2

Views: 10524

Answers (3)

Bouke Versteegh
Bouke Versteegh

Reputation: 4677

If your options are stored in a property which is loaded dynamically:

  • computed property
  • async computed (using AsyncComputed plugin)
  • through props, which may change

Then you can @Watch the property to set the first option. That way the behavior of selecting the first item is separated from data-loading and your code is more understandable.

Example using Typescript and @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;
  }
}

Upvotes: 0

RBS
RBS

Reputation: 21

what if we don't know what the first option is. The list is generated?

if you have dynamic data, something like this will work.

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

Upvotes: 1

Digvijay
Digvijay

Reputation: 8947

your v-model should have the value of the first option.

example

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

You can trigger this.selected=${firstOptionValue} when no data is set.

Upvotes: 6

Related Questions