Javascript 如何在更改事件上更改输入模型属性?
所以我有一个表单,用户输入答案。我收集答案并将其存储在数据库中。 每个表单都包含一个带有YES/NO(是/否)的单选按钮。如果用户切换到YES(是),表单将被启用,以便他可以写下答案。我的目标是使用纯vue根据用户行为将表单的属性更改为enabled 代码Javascript 如何在更改事件上更改输入模型属性?,javascript,html,vue.js,nuxt.js,bootstrap-vue,Javascript,Html,Vue.js,Nuxt.js,Bootstrap Vue,所以我有一个表单,用户输入答案。我收集答案并将其存储在数据库中。 每个表单都包含一个带有YES/NO(是/否)的单选按钮。如果用户切换到YES(是),表单将被启用,以便他可以写下答案。我的目标是使用纯vue根据用户行为将表单的属性更改为enabled 代码 <b-form-group > <label class="d-inline mr-sm-2">Avez-vous des antécédents médicaux?</label&g
<b-form-group >
<label class="d-inline mr-sm-2">Avez-vous des antécédents médicaux?</label>
<input @change="enableForm" type="radio" value="Non" v-model="selected1">
<label for="one">Non</label>
<input @change="enableForm" type="radio" value="Oui" v-model="selected1">
<label for="two">Oui</label>
<b-form-input
v-model="form.q1.value"
placeholder="Précisez"
:disabled="form.q1.enabled">
</b-form-input>
</b-form-group>
<b-form-group >
<label class="d-inline mr-sm-2">Avez-vous des antécédents médicaux?</label>
<input @change="enableForm" type="radio" value="Non" v-model="selected2">
<label for="one">Non</label>
<input @change="enableForm" type="radio" value="Oui" v-model="selected2">
<label for="two">Oui</label>
<b-form-input
v-model="form.q2.value"
placeholder="Précisez"
:disabled="form.q2.enabled">
</b-form-input>
</b-form-group>
它看起来是什么样子的图像
您需要在
onchange
事件调用中传递要禁用或启用的表单
如果您想使用相同的方法来启用或禁用表单,那么在这种情况下,您还需要向该方法传递一个以上的参数(在下面的代码中,我使用了不同的方法来启用或禁用表单)
我还更新了条件:disabled=“!form.q1.enabled”>
,以便使正确传递值
newvue({
el:“应用程序”,
数据(){
返回{
表格:{
q1:{“value”:null,“enabled”:false},
q2:{“value”:null,“enabled”:false}
},
已选择1:“非”,
已选择2:“非”,
}
},
方法:{
使能形式(q){
//你应该在这里写什么
this.form[q].enabled=true;
},
禁用形式(q){
this.form[q].enabled=false;
}
}
})
你有什么建议吗?
不
是的
你有什么建议吗?
不
是的
data(){
return {
form: {
q1 : {"value":null, "enabled" : false},
q2 : {"value":null, "enabled" : false}
},
selected1:'Non',
selected2:'Non',
}
},
methods:{
enableForm(){
// What should write here
}
}