등급 시스템을 구현하려하지만 Vue js의 등급 값을 전달할 수 없습니까?

Question

설명서를 읽은 후 다음 코드를 시도했습니다. enquiryDesc에 대한 데이터를 가져올 수 있지만 등급에 대해 null 값이 표시됩니다. 여러 단계를 시도하고 null 값을 얻었습니다.

내 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 스크립트입니다

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)

{평가에 대한 나의 응답 : '', enquiryDesc : "cghjl ,./"}

나는 v-model과 v-bind:value을 사용했고 지금은 값이 아닙니다. 나는 이것들에 정말로 붙어있다. 초기화되지 않은 것이 있습니까? 제발 솔루션을 가지고 도와주세요. 나는 여러 가지 튜토리얼을 통과했고 모든 것이 똑같은 방식으로한다고 말한다.

Answer 1

입력에 value 속성을 사용할 수 없습니다. Vue는 진실의 원천이며 v-model 값입니다. 기본 v 모델 값을 설정하면 특정 입력이 자동으로 확인됩니다.

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

변경 또한 첫 번째 줄과 agin 그것을 시도 :

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