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

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