问题描述

今天产品问我一线上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的更多相关文章

  1. JS魔法堂：函数重载 之 获取变量的数据类型

    Brief 有时我们需要根据入参的数据类型来决定调用哪个函数实现,就是说所谓的函数重载(function overloading).因为JS没有内置函数重载的特性,正好给机会我们思考和实现一套这样的机 ...

  2. typeof获取变量的数据类型 javascript

    获取变量的数据类型:typeof <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. Vue获取dom和数据监听

    Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...

  4. java封装数据类型——Boolean

    众所周知,java对常见的原始数据类型都提供了对应的封装类型,增加一些常用的特性(如 计算hash值.比较相等.类型转换等),以扩展他们对数据处理的能力,使得他们更好地适应面向对象编程的各种场景.今天 ...

  5. Java知识日常收集整理001Java获取变量的数据类型的实现方法

    一.具体情况区分 对于简单类型变量,是无法直接获得变量类型的:要想获取,必须自定义函数进行返回. 对于包装类型变量,是可以直接获得的,变量名称.getClass().getName(); 二.代码实现 ...

  6. vue获取下拉框值

    vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...

  7. vue获取当前元素

    Html: <li><a href="#" v-on:click="typeStyle">萨克斯萨克<span></s ...

  8. 获取v$latch数据源实验

    实验环境:Oracle Rac 11.2.0.3 首先获取v$latch的定义:通过PL/SQL或者get ddl等常规途径只能获取到v_$latch相关的视图信息.需要通过特殊方法获取v$latch ...

  9. 实现一个函数clone，可以对JS中的5种数据类型（Number、String、Object、Array、Boolean）进行值复制

     实现一个函数clone,可以对JS中的5种数据类型(Number.String.Object.Array.Boolean)进行值复制

随机推荐

  1. GCC在C语言中内嵌汇编 asm __volatile__

    2012-11-26 22:20 17958人阅读 评论(2) 收藏 举报  分类: linux(59)  架构管理(24)  C/C++(59)  目录(?)[+] 在内嵌汇编中,可以将C语言表达式 ...

  2. poj1511【最短路spfa】

    题意: 计算从源点1到各点的最短路之和+各点到源点1的最短路之和: 思路: 源点这个好做啊,可是各点到源点,转个弯就是反向建边然后求一下源点到各点的最短路,就是各点到源点的最短路,在两幅图里搞: 贴一 ...

  3. <TLE>奇偶剪枝hdoj1010

    (奇偶剪枝)转自百度百科,讲的非常棒: http://baike.baidu.com/link?url=3g5bW7LszRVOVvFDFp6cL0ZZnAaOLUdpaNjc2leHoxkKU9Eh ...

  4. P5168 xtq玩魔塔

    传送门 其实就是板子--只要会克鲁斯卡尔重构树和带修莫队就可以了 这么想着的我就调了将近一个下午-- 思路其实比较清晰,然而码量很大,细节贼多-- 不难看出只在最小生成树上走最优,于是建出克鲁斯卡尔重 ...

  5. 进程动态拦截注入API HOOK

    最近工作中遇到一个问题,需要通过程序界面进行判断程序的运行状态,刚开始认为很简单,不就是一个窗体控件获取,获取Button的状态和Text.刚好去年干过该事情,就没太在意,就把优先级排到后面了,随着项 ...

  6. Hdu 3966 Aragorn's Story (树链剖分 + 线段树区间更新)

    题目链接: Hdu 3966 Aragorn's Story 题目描述: 给出一个树,每个节点都有一个权值,有三种操作: 1:( I, i, j, x ) 从i到j的路径上经过的节点全部都加上x: 2 ...

  7. 怎么查看这个历史最大连接session数

    select * from dba_high_water_mark_statistics;

  8. jmeter（二十一）JMeter 命令行（非GUI）

    一.应用场景 1.无需交互界面或受环境限制(linux text model) 2.远程或分布式执行 3.持续集成,通过shell脚本或批处理命令均可执行,生成的测试结果可被报表生成模块直接使用,便于 ...

  9. jQuery attr() 源码解读

    我们知道,$().attr()实质上是内部调用了jQuery.access方法,在调用时jQuery.attr作为回调传入.在通过种种判断(参看jQuery.access()方法)之后,取值和赋值最后 ...

  10. spring boot druid mybatis多数据源

    一.关闭数据源自动配置(很关键) @SpringBootApplication(exclude = { DataSourceAutoConfiguration.class }) 如果不关闭会报异常:o ...