[英]How to disable a text box based on a select dropdown item?
Essentially I want a dropdown (or combobox) that is next to a text input field that is disabled by default. 本质上,我希望在默认情况下禁用的文本输入字段旁边添加一个下拉列表(或组合框)。 I want to be able to enable the text field when a specific property from the dropdown is selected. 我希望能够从下拉列表中选择特定属性时启用文本字段。
My main problem I guess is that I have an input_disabled value that I don't know how to change dynamically based off what property has been selected. 我想我的主要问题是我有一个input_disabled值,我不知道如何根据选择的属性来动态更改。
Here's a portion of the relative HTML I have. 这是我拥有的相对HTML的一部分。
<template>
<v-container class="my-1 mx-5">
<form>
<v-select
v-model="select_property"
:properties="properties"
label="properties"
@change="$v.select_property.$touch()"
@blur="$v.select_property.$touch()"
></v-select>
<v-text-field
v-model="custom_path"
:error-messages="custom_pathErrors"
:disabled="input_disabled"
label="Custom Property Path"
@input="$v.name.$touch()"
@blur="$v.name.$touch()"
></v-text-field>
...
and a portion of the data section that VueJS uses 以及VueJS使用的数据部分的一部分
data: () => ({
input_disabled: true,
properties:[
'Prop1',
'Prop2',
'Prop3',
'Prop4'
]
}),
When prop4
is selected input_disabled
should be set to false
and the text field should now allow the user to input text without issue. 当prop4
选择了input_disabled
应设置为false
且文本字段现在应该允许用户输入文本没有问题。 The problem I have is I don't know how to change input_disabled
. 我的问题是我不知道如何更改input_disabled
。
Vuejs provides the computed properties, there is exactly what you need, the value of a computed properties is set dynamically, do something like this: Vuejs提供了计算属性,正是您需要的,计算属性的值是动态设置的,执行以下操作:
computed: {
input_disabled() {
return data.properties[3] ? false : true;
}
}
Every update on data.properties[3] will trigger this computed and update the input_disabled value. 每次对data.properties [3]进行更新都会触发此计算并更新input_disabled值。 If you use this, dont declare the input_disabled on your data, computed include this variable there for you; 如果您使用此选项,请不要在数据上声明input_disabled,而应该在其中为您计算出包含此变量的值;
You set the data something like this (replace setState with watever function you are using to set the data): 您可以像这样设置数据(将setState替换为用于设置数据的watever函数):
setState({
data: {
input_disabled: select_property === data.properties[3] ? false : true,
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.