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"