>

문서를 살펴본 후 다음 코드를 시도했습니다. enquiryDesc 에 대한 데이터를 얻을 수 있습니다  (RADIO BUTTON) 나는 또한 체크 박스로 바뀌었다. 내 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: "", enquiryDesc: "hello how are you"}

정격 값은 항상 변경되지 않습니다. 5. V-MODEL이 등급을 업데이트하지 않습니다. 나는 정말 같은 생각입니다. 문제를 해결하도록 도와주세요. 라디오 버튼이있는 경우를 확인하지 않았습니까? 또는 코딩에 문제가 있습니다. 이것은 첫 번째 프로젝트이며 앞으로 나아갈 수 없습니다 ..


  • 답변 # 1

    값을 수정할 필요가 없으므로 값을 라디오에 바인딩해서는 안됩니다.

    와이즈 비즈

    이 스 니펫을 확인하십시오.

    v-bind:value="5" and v-bind:value="4"just remove this lines instead use normalvalue="4" and value="5"

    and in data you don't need to setrating : 5 just userating :'' as user will select and then this data will be filled.

    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>

관련 자료

  • 이전 c# - 문자열, 문자열, 문자열, 정수 및 문자열, 객체로 사전 만들기
  • 다음 반응 네이티브에서 양방향 무한 ScrellView 구현