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

问题描述今天产品问我一线上bug,怎么radio类型改不了问题分析看代码，之前的哥们儿是怎么写的//页面<div class="ui-form-box"><div class="ui-form-checkbox"><label for="delivery"><input type="radi...

weixin_30478923

2767人浏览 · 2018-11-23 13:41:00

weixin_30478923 · 2018-11-23 13:41:00 发布

问题描述

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

1673f036788b3189?w=500&h=90&f=png&s=11422

问题分析

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

//页面
<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>

转载于:https://www.cnblogs.com/shipskunkun/p/10007034.html

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^