Question

我浏览了文档并尝试了以下代码。我能够获得enquiryDesc的数据，但是获得的价值总是为5评级。（RADIO BUTTON）我改为CHECKBOX也是......但仍然没有发生我的html表单是

<form id="enquiryBox" method="POST" data-parsley-validate="true" v-on:submit.prevent="handelSubmit()">
  <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" value="5" ><label class = "full" for="star5" title="Awesome">5</label>
                <input v-model="rating" type="radio" id="rating" name="rating" value="4" ><label class="half" for="star4half" title="Pretty good">4</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脚本为

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

我对console.log(data)

的回复

{rating：＆＃34;＆＃34;，enquiryDesc：＆＃34;你好，你好吗＆＃34;}

评级的价值永远不会改变5.即V-MODEL不会为评级更新。我真的很生气。请帮助我解决问题。是不是检查单选按钮的情况？或者我编码的一些问题。这是我的第一个项目，我无法继续前进..

Answer 1

您不应该将值绑定到radio，因为您不需要修改它们，

v-bind：value =“5”和v-bind：value =“4”只需删除此行而不是使用普通 value =“4”和value =“5”

在数据中，您无需设置评分：5 只需使用评分：''   用户将选择，然后将填写此数据。

结帐此代码段。

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); return false; } }, });

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>VueJS</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> </head> <body> <form id="enquiryBox" method="POST" data-parsley-validate="true" v-on:submit.prevent="handelSubmit()"> <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" value="5" ><label class = "full" for="star5" title="Awesome">5</label> <input v-model="rating" type="radio" id="rating" name="rating" value="4" ><label class="half" for="star4half" title="Pretty good">4</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> </body> </html>

其他方式点击数字然后按提交，你可以看到它的更新：

var 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); return false; } }, });

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>VueJS</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> </head> <body> <div id="enquiryBox"> <form method="POST" data-parsley-validate="true" v-on:submit.prevent="handelSubmit()"> <div class="modal-body brbottom-20"> <div class="clearfix"> <div class="col-lg-6"> <div class="form-group required"> <fieldset class="rating"> <span @click="rating = 1">1</span> <span @click="rating = 2">2</span> <span @click="rating = 3">3</span> </fieldset> </div> </div> </div> </div> <div class=""> <button id="btn-submit-enquiry" class="btn whiteButton" type="submit">Post Enquiry</button> </div> </form> </div> </body> </html>

Answer 2

我遇到了类似的问题！我使用 :value 和 @change 事件解决了这个问题。

 <input :value="rating" @change="rating=$event" type="radio" id="rating" name="rating" value="5">

在vue js中使用单选按钮时未更新v-model？

2 个答案: