필드 등급(vue js) 값을 전달하려면 어떻게 해야 합니까?

필드 등급(vue js) 값을 전달하려면 어떻게 해야 합니까?

제 폼은

<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 v-model="rating" type="radio" id="rating" name="rating" v-bind:value="5" ><label v-bind:value="5" class = "full" for="star5" title="Awesome"></label>
               <input v-model="rating" type="radio" id="rating" name="rating" v-bind:value="4" ><label v-bind:value="4" class="half" for="star4half" title="Pretty good"></label>
                <input v-model="rating" type="radio" id="rating" name="rating" v-bind:value="3" ><label v-bind:value="3" 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>

위 양식에서 등급 이외의 데이터를 얻을 수 있습니다.등급 값을 전달하려면 어떻게 해야 합니까?이제 등급 값이 비어 있습니다.다른 모든 필드에서는 데이터를 전달할 수 있습니다.

내 vue js 코드

enquiryBox = 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;
      $.ajax({
        url: 'https://n2s.herokuapp.com/api/post/add_review/',
        data: data,
        type: "POST",
        dataType: 'json',
        success: function(e) {
          if (e.status) {
            alert("Review Success")

          } else {
            alert(" Failed")
          }
        }
      });
      return false;
    }
  },
});

그래서 어떻게 하면 평가의 값을 넘길 수 있을까요?먼저 선택한 경우 값 5를 전달해야 합니다. 그렇지 않으면 값 4를 전달해야 합니다.하지만 현재 등급 데이터를 통과시킬 수 없습니다.저는 초보자입니다.제가 같은 일을 할 수 있도록 도와주시겠어요?

추가하는 것을 잊으셨습니다.v-model="rating"무전기의 입력에 대응합니다.다음과 같이 시도해 보십시오.

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>

언급URL : https://stackoverflow.com/questions/47692015/how-can-i-able-to-pass-the-value-of-field-rating-in-vue-js