[英]vuejs select option change based on conditon
我尝试从表单输入中获取用户输入值。 然后,选择选项将基于用户输入值禁用某些选择。 如何在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
}
}
然后将选项绑定为:options="filteredAnimalType"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.