Javascript 如何在更改事件上更改输入模型属性?

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

所以我有一个表单,用户输入答案。我收集答案并将其存储在数据库中。 每个表单都包含一个带有YES/NO(是/否)的单选按钮。如果用户切换到YES(是),表单将被启用,以便他可以写下答案。我的目标是使用纯vue根据用户行为将表单的属性更改为enabled

代码

<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
   }
   
}