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

我的表格是

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

标签：vue-js,vue-component,vuejs2,javascript,jquery
来源： https://codeday.me/bug/20191025/1929167.html