如何在 vue js 中传递字段 Rating 的值？

Question

我的表格是

<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 ..但目前我无法传递评级数据..我是初学者..请帮我实现同样的目标？？

Answer 1

您忘记在无线电输入中添加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>