[英]vuejs select option change based on conditon
I try to get the user input value from a form input. 我尝试从表单输入中获取用户输入值。 Then the select option will disable certain selection based on the user input value.
然后,选择选项将基于用户输入值禁用某些选择。 How can I achieve this feature in
vuejs
? 如何在
vuejs
实现此功能? I am using bootstrap-vue
framework. 我正在使用
bootstrap-vue
框架。 For example: 例如:
Form input:(user will type random animal name here) 表单输入:(用户将在此处输入随机动物名称)
<b-form-input type="text" v-model="animal_name"></b-form-input>
Form Select:(for this example I assume user will type in fish) 表单选择:(在此示例中,我假设用户将键入fish)
<b-form-select class="mb-2 mr-sm-2 mb-sm-0"
v-model="selectedAnimalType"
:options="animalType"
>
</b-form-select>
When User type in first, it will automatically disable the option which does not belong to fish. 当用户首次输入时,它将自动禁用不属于鱼类的选项。
How can I achieve this function using vuejs
? 如何使用
vuejs
实现此功能?
Use a computed property and filter the select options: 使用计算的属性并过滤选择选项:
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
}
}
Then bind the options as :options="filteredAnimalType"
然后将选项绑定为
:options="filteredAnimalType"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.