[Vuejs]-V-model is not updated in when using radio button in vue js?

by

1👍

You should not bind the value to radio as you don’t need to modify them so,

v-bind:value=”5″ and v-bind:value=”4″ just remove this lines instead use normal value=”4″ and value=”5″

and in data you don’t need to set rating : 5 just use rating :”
as user will select and then this data will be filled.

checkout this snippet.

enquiryBox = new Vue({
   el: "#enquiryBox",
   data: {
     rating: '',
     enquiryDesc: '',
   },
   methods: {
     handelSubmit: function(e) {
       var vm = this;
       data = {};
       data['rating'] = this.rating;
       data['enquiryDesc'] = this.enquiryDesc;
       console.log(data);

       
       return false;
     }
   },
 });
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>VueJS</title>
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
    
        <form id="enquiryBox" method="POST" data-parsley-validate="true" v-on:submit.prevent="handelSubmit()">
  <div class="modal-body brbottom-20">
    <div class="clearfix">
      <div class="col-lg-6">
        <div class="form-group required">
      <fieldset class="rating">
                <input v-model="rating" type="radio" id="rating" name="rating" value="5" ><label class = "full" for="star5" title="Awesome">5</label>
                <input v-model="rating" type="radio" id="rating" name="rating" value="4" ><label class="half" for="star4half" title="Pretty good">4</label>
    </fieldset>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="form-group required">
          <label>Enquiry</label>
          <textarea placeholder="Write your enquiry here" rows="7" id="enquiryDesc" name="enquiryDesc" class="form-control required" title="Desc" v-model="enquiryDesc" required="required"></textarea>
        </div>
      </div>
    </div>
  </div>
  <div class="">
    <button id="btn-submit-enquiry" class="btn whiteButton" type="submit">Post Enquiry</button>
  </div>
</form>    


</body>

</html>

other way click on number then press submit you can see its updated:

var enquiryBox = new Vue({
   el: "#enquiryBox",
   data: {
     rating: '',
     enquiryDesc: '',
   },
   methods: {
     handelSubmit: function(e) {
       var vm = this;
       data = {};
       data['rating'] = this.rating;
       data['enquiryDesc'] = this.enquiryDesc;
       console.log(data);       
       return false;
     }
   },
 });
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>VueJS</title>
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
    <div id="enquiryBox">
        <form method="POST" data-parsley-validate="true" v-on:submit.prevent="handelSubmit()">
          <div class="modal-body brbottom-20">
            <div class="clearfix">
              <div class="col-lg-6">
                <div class="form-group required">
                  <fieldset class="rating">
                    <span @click="rating = 1">1</span>
                    <span @click="rating = 2">2</span>
                    <span @click="rating = 3">3</span>
                  </fieldset>
                </div>
              </div>
              
            </div>
          </div>
          <div class="">
            <button id="btn-submit-enquiry" class="btn whiteButton" type="submit">Post Enquiry</button>
          </div>
        </form>
    </div>


</body>

</html>
👤Hardik Satasiya

1👍

I faced a similar issue! I resolved it using :value and the @change event.

 <input :value="rating" @change="rating=$event" type="radio" id="rating" name="rating" value="5">
👤Orestis

Leave a comment