javascript - vuejs 根据条件选择选项更改

Question

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

表单输入:(用户将在此处键入随机动物名称)

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

表单选择:(在此示例中，我假设用户将输入“fish”)

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

然后将选项绑定(bind)为 :options="filteredAnimalType"