我正在尝试实施评级系统但我无法在 Vue js 中传递评级值？

Question

我浏览了文档并尝试了以下代码。我能够获得enquiryDesc 的数据，但获得评级的空值。我尝试了几个步骤并获得了空值。

我的html表单是

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

我的vue js脚本是as

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

       $.ajax({
         url: 'https://api/post/add_review/',
         data: data,
         type: "POST",
         dataType: 'json',
         success: function(e) {
           if (e.status) {
             alert("Success")

           } else {
             vm.response = e;

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

我对@9​​87654325@的回复

{rating: '', enquiryDesc: "cghjl,./"}

我用过v-model 和v-bind:value，现在我不是价值观。我真的被这些困住了。有什么东西没有初始化吗？请帮助我找到解决方案。我已经阅读了几个教程，并且所有内容都以相同的方式进行。

Answer 1

您不能在输入中使用 value 属性。因为 Vue 是 v-model 值的真实来源。只需设置默认的 v-model 值，就会自动检查特定的输入。

new Vue({
  el: '#app',
  data () {
    return {
      rating: 3
    }
  },
  methods: {
    send (e) {
      e.preventDefault()
      console.log(this.rating)
    }
  }
})

<div id="app">
  <form action="" method="post" @submit="send">
    <fieldset>
      <input type="radio" name="rating" value="5" v-model="rating">
      <input type="radio" name="rating" value="4" v-model="rating">
      <input type="radio" name="rating" value="3" v-model="rating">
      <input type="radio" name="rating" value="2" v-model="rating">
      <input type="radio" name="rating" value="1" v-model="rating">
    </fieldset>
    <button type="submit">Send</button>
  </form>
</div>

<script src="https://unpkg.com/vue@2.5.9/dist/vue.min.js"></script>

在您的代码中尝试这些更改 - 在 HTML 中：

<fieldset class="rating">
  <label class="full" for="star5" title="Awesome">5</label>
  <input v-model="rating" type="radio" id="star5" name="rating" value="5">
  <label class="half" for="star4half" title="Pretty good">4</label>
  <input v-model="rating" type="radio" id="star4half" name="rating" value="4">
</fieldset>

在 JS 中：

enquiryBox = new Vue({
  el: "#enquiryBox",
  data: {
    rating: 5,
    enquiryDesc: '',
  },
  methods: {
    handelSubmit: function (e) {
      const vm = this
      const data = {}

      data['rating'] = this.rating
      data['enquiryDesc'] = this.enquiryDesc

      $.ajax({
        url: 'https://api/post/add_review/',
        data: data,
        type: "POST",
        dataType: 'json',
        success: function (e) {
          if (e.status) {
            alert('Success')
          } else {
            vm.response = e
            alert('Failed')
          }
        }
      })

      return false
    }
  }
})

也更改第一行并再次尝试：

<form id="enquiryBox" method="post" data-parsley-validate="true" @submit="handelSubmit">