vuejs select option change based on conditon

Question

I try to get the user input value from a form input. Then the select option will disable certain selection based on the user input value. How can I achieve this feature in vuejs ? I am using bootstrap-vue framework. For example:

Form input:(user will type random animal name here)

<b-form-input type="text" v-model="animal_name"></b-form-input>

Form Select:(for this example I assume user will type in fish)

<b-form-select class="mb-2 mr-sm-2 mb-sm-0"
                           v-model="selectedAnimalType"
                           :options="animalType"
                         >
                        </b-form-select>

When User type in first, it will automatically disable the option which does not belong to fish.

How can I achieve this function using vuejs ?

Answer 1

Use a computed property and filter the select options:

computed: {
  filteredAnimalType () {
    if (this.animal_name) {
      // if animalType is a string array
      return this.animalType.filter(t => t.includes(this.animal_name))
      // otherwise filter on the desired property, e.g. t.taxonomy
    }
    return this.animalType
  }
}

Then bind the options as :options="filteredAnimalType"