我尝试从表单输入中获取用户输入值。然后选择选项将根据用户输入值禁用某些选择。如何在 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
实现这个功能?
最佳答案
使用计算属性并过滤选择选项:
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"
关于javascript - vuejs 根据条件选择选项更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53829397/