vue jsでフィールド定格の値をどのように渡すことができますか？

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>