vue js select 根据条件更改选项

Question

我尝试从表单输入中获取用户输入值。然后 select 选项将根据用户输入的值禁用某些 selection。如何在 vuejs 中实现此功能？我正在使用 bootstrap-vue 框架。例如：

表单输入：（用户将在此处输入随机动物名称）

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

表格Select：（对于这个例子我假设用户会输入fish）

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

当用户第一次输入时，它会自动禁用不属于鱼的选项。

如何使用 vuejs 实现此功能？

Answer 1

使用计算的属性并过滤 select 选项：

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"

vue js select 根据条件更改选项

vuejs select option change based on conditon

javascript

vue.js

bootstrap-vue