vuejs выберите опцию изменения в зависимости от условий

Question

Я пытаюсь получить пользовательское значение ввода из формы ввода.Тогда опция выбора отключит определенный выбор на основе введенного пользователем значения.Как я могу достичь этой функции в vuejs?Я использую bootstrap-vue Framework.Например:

Ввод формы: (здесь пользователь вводит случайное имя животного)

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

Выбор формы: (в этом примере я предполагаю, что пользователь будет вводить рыбу)

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

Когда пользователь вводит первый, он автоматически отключает опцию, которая не относится к рыбе.

Как я могу достичь этой функциииспользуя vuejs?

Answer 1

Используйте вычисляемое свойство и отфильтруйте параметры выбора:

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

Затем свяжите параметры как :options="filteredAnimalType"