How can I able to pass the value of field Rating in vue js? How can I able to pass the value of field Rating in vue js? vue.js vue.js

How can I able to pass the value of field Rating in vue js?


You forgot to add v-model="rating" to your radio inputs. Try it like this:

new Vue({  el: "#enquiryBox",  data: {    rating: '',    enquiryPhone: '',    enquiryEmail: '',    enquiryDesc: '',  },  methods: {    handelSubmit: function(e) {      var vm = this;      data = {};      data['rating'] = this.rating;      data['enquiryEmail'] = this.enquiryEmail;      data['enquiryPhone'] = this.enquiryPhone;      data['enquiryDesc'] = this.enquiryDesc;      // TODO add your AJAX instead      console.log(data);      return false;    }  },});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script><form id="enquiryBox" method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">  <div class="modal-body brbottom-20">    <div class="clearfix">      <div class="col-lg-6">        <div class="form-group required">          <fieldset class="rating">            <input type="radio" id="rating" name="rating" v-bind:value="5" v-model="rating" />            <label class="full" for="star5" title="Awesome"></label>            <input type="radio" id="rating" name="rating" v-bind:value="4" v-model="rating" />            <label class="half" for="star4half" title="Pretty good"></label>            <input type="radio" id="rating" name="rating" v-bind:value="3" v-model="rating" />            <label class="full" for="star4" title="Pretty good"></label>          </fieldset>        </div>        <div class="form-group required">          <label>Email Address</label>          <input type="text" placeholder="Enter Your Email" id="enquiryEmail" name="enquiryEmail" class="form-control required" title="Email" v-model="enquiryEmail" required="required">        </div>        <div class="form-group required">          <label>Phone Number</label>          <input type="text" placeholder="Enter Your Phone Number" id="enquiryPhone" name="enquiryPhone" class="form-control required" title="Phone" v-model="enquiryPhone" required="required">        </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="modal-footer center-med-res center-sm-res center-xs-res">    <button id="btn-submit-enquiry" class="btn whiteButton" type="submit">Post Enquiry</button>    <button data-dismiss="modal" class="btn darkGrayButton" type="button">Cancel</button>  </div></form>