Search code examples
javascripthtmlvue.jsnuxt.jsbootstrap-vue

How to change input model attributes on change event?

So i have a form where the user input answer. I collect the answers and store them in DB. Each form contains a radio button with YES/NO. if the user switch to the yes the form gets enabled so he can write down answers. My goal is to change the attribute of the form to enabled based on user behavior using purely vue

the code

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

The vue js code

data(){
        return {
            form: {
                q1 : {"value":null, "enabled" : false},
                q2 : {"value":null, "enabled" : false}
            },
            selected1:'Non',
            selected2:'Non', 
        }
    },
methods:{
   enableForm(){
    // What should write here
   }
   
}

Image of how it looks like enter image description here

Solution

  • You need to pass the form which you want to disable or enable in the onchange event call.

    If you want to use the same method for enabling or disabling the form, then in that case you need to also pass one more parameter to the method (here in the below code I used different methods to enable or disable the form).

    I have also update the condition :disabled="!form.q1.enabled"> so to make the correctly pass the values.

    new Vue({
  el: "#app",
  data(){
        return {
            form: {
                q1 : {"value":null, "enabled" : false},
                q2 : {"value":null, "enabled" : false}
            },
            selected1:'Non',
            selected2:'Non', 
        }
    },
  methods:{
    enableForm(q){
      // What should write here
      this.form[q].enabled = true; 
    },
    disableForm(q) {
      this.form[q].enabled = false;
    }
  }
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.js" integrity="sha512-Z0dNfC81uEXC2iTTXtE0rM18I3ATkwn1m8Lxe0onw/uPEEkCmVZd+H8GTeYGkAZv50yvoSR5N3hoy/Do2hNSkw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
<b-form-group >
    <label class="d-inline mr-sm-2">Avez-vous des antécédents médicaux?</label>
           <input @change="disableForm('q1')" type="radio" value="Non" v-model="selected1">
           <label for="one">Non</label>
           <input @change="enableForm('q1')" 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="disableForm('q2')" type="radio" value="Non" v-model="selected2">
           <label for="one">Non</label>
           <input @change="enableForm('q2')" 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>
</div>