在 vue js 中使用单选按钮时 v-model 没有更新?

Posted

技术标签:

【中文标题】在 vue js 中使用单选按钮时 v-model 没有更新?【英文标题】:v-model is not updated in when using radio button in vue js? 【发布时间】:2018-05-22 08:01:40 【问题描述】:

我浏览了文档并尝试了以下代码。我可以得到enquiryDesc 的数据,但我总是得到 5 的评级。我也尝试将无线电组更改为复选框,但它不起作用。

我的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;
     
   ,
 );

我对@9​​87654325@的回复

rating: "", enquiryDesc: "hello how are you"

rating 的值永远不会改变,它总是保持 5。

【问题讨论】:

【参考方案1】:

您不应该将值绑定到收音机,因为您不需要修改它们,

v-bind:value="5" 和 v-bind:value="4" 只需删除这些行而不是使用普通 value="4" 和 value="5"

在数据中您不需要设置 rating : 5 只需使用 rating :'' 用户将选择,然后将填充此数据。

签出这个 sn-p。

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>

【讨论】:

先生,这些我都试过了。但对我来说什么也没有发生。我被困在这 2 天,仍然没有运气 在 sn-p 中检查它的工作正常。如果仍然无法正常工作,请为我提供工作 url 或类似的东西,以便我可以调试它。 我在本地做,后端是 django 在这种情况下它也不会起作用,您是否检查了 sn-p "Run Code sn-p" 并对其进行测试,在我的回答中,它的工作原理 有没有其他办法。【参考方案2】:

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

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

【讨论】:

以上是关于在 vue js 中使用单选按钮时 v-model 没有更新?的主要内容,如果未能解决你的问题,请参考以下文章

我无法将我的 v-model 数据传递到我的后端以获取 vue.js 中的单选按钮类型,如何将选中的单选按钮值传递给我的后端?

vue单选按钮示例

vue单选按钮示例

自定义单选按钮上的 Vue v-model

Vue v-model 不响应 BS4 单选按钮组

vue 表单之通过v-model绑定单选按钮radio