vue获取v-model数据类型boolean改变成string

问题描述

今天产品问我一线上bug,怎么radio类型改不了

问题分析

看代码，之前的哥们儿是怎么写的

//页面
<div class="ui-form-box">
    <div class="ui-form-checkbox">
        <label for="delivery">
            <input type="radio" name="delivery" value="true" v-model="delivery">是
        </label>
    </div>
    <div class="ui-form-checkbox">
        <label for="delivery">
            <input type="radio" name="delivery" value="false" v-model="delivery">否
        </label>
    </div>
</div>

// 获取数据
delivery: me.$data.delivery ? "1" : "0",

bug原因

按道理来说，选中了否，value 为false，提交的 delivery 值应该是 "0", 但实际上无论怎么选择，都是 "1"

打印出
typeof me.$data.delivery // string 所以取到的 me.$data.delivery 实际上是 "false"

问题出在绑定 radio 时候数据绑定的不对
那么改成
<input type="radio" name="delivery" value=true v-model="delivery">是
去掉 true 的 "" 就对了么，还是不对
应该改成

 <input type="radio" name="delivery" :value=true v-model="delivery">是
 
或者
<input type="radio" name="delivery" :value="true" v-model="delivery">是

使用 v-bind
加: 代表取的是变量, 是值
不加：代表取的是字符串

自己测试代码

<!DOCTYPE html>
<html lang="en">
   <head>
       <title></title>
       <meta charset="utf-8">
       <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
   </head>
   <body>
       <div id="app">
           <div>
               <label>
                   <input type="radio" name="delivery" :value="true" v-model="delivery">是
               </label>
               <label>
                   <input type="radio" name="delivery" :value="false" v-model="delivery">否
               </label>
           </div>
           <button @click="getDelivery">获取delivery</button>
       </div>
       <script>
           var app = new Vue({
               el: '#app',
               data: {
                   delivery: true
               },
               methods: {
                   getDelivery: function () {
                       var a = this.$data.delivery;
                       console.log("a= ", a  ," ,typeof a = ", typeof a);
                       var b = a ? "1" : "0";
                       console.log("b", b);
                   }
               }
           })
       </script>
   </body>
</html>

vue获取v-model数据类型boolean改变成string

问题描述

问题分析

bug原因

自己测试代码

猜你喜欢