问题描述

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

问题分析

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

  1. //页面
  2. <div class="ui-form-box">
  3.     <div class="ui-form-checkbox">
  4.         <label for="delivery">
  5.             <input type="radio" name="delivery" value="true" v-model="delivery">是
  6.         </label>
  7.     </div>
  8.     <div class="ui-form-checkbox">
  9.         <label for="delivery">
  10.             <input type="radio" name="delivery" value="false" v-model="delivery">否
  11.         </label>
  12.     </div>
  13. </div>
  15. // 获取数据
  16. delivery: me.$data.delivery ? "1" : "0",

bug原因

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

打印出

  1. typeof me.$data.delivery  // string
  2. 所以取到的 me.$data.delivery 实际上是 "false"

问题出在绑定 radio 时候数据绑定的不对

那么改成

  1.  <input type="radio" name="delivery" value=true v-model="delivery">是

去掉 true 的 "" 就对了么，还是不对

应该改成

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

使用 v-bind

加: 代表取的是变量, 是值

不加 ：代表取的是字符串

自己测试代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.    <head>
  4.        <title></title>
  5.        <meta charset="utf-8">
  6.        <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
  7.    </head>
  8.    <body>
  9.        <div id="app">
  10.            <div>
  11.                <label>
  12.                    <input type="radio" name="delivery" :value="true" v-model="delivery">是
  13.                </label>
  14.                <label>
  15.                    <input type="radio" name="delivery" :value="false" v-model="delivery">否
  16.                </label>
  17.            </div>
  18.            <button @click="getDelivery">获取delivery</button>
  19.        </div>
  20.        <script>
  21.            var app = new Vue({
  22.                el: '#app',
  23.                data: {
  24.                	delivery: true
  25.                },
  26.                methods: {
  27.                    getDelivery: function () {
  28.                        var a = this.$data.delivery;
  29.                        console.log("a= ", a  ," ,typeof a = ", typeof a);
  30.                        var b = a ? "1" : "0";
  31.                        console.log("b", b);
  32.                    }
  33.                }
  34.    		})
  35.        </script>
  36.    </body>
  37. </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. 51nod1126【矩阵快速幂】

    思路: 自己的一点心得:中间矩阵为最终矩阵. 搞出来很简单的: #include <bits/stdc++.h> using namespace std; const int N=1e2+ ...

  2. lightoj1231【背包】

    题意: 有n种货币,已知每种货币的价值和数量. 给出一个k,问最多能组成k的方法.这个数量很大,需要mod 1e8+7. 思路: 额....这一题和上一篇的差不多,直接传送门: (此题很棒) 这里的话 ...

  3. 664A - Complicated GCD

    题意真是七零八落,乱七八糟.盲目瞎写,水过就好? #include <cstdio> #include <cstring> #include <algorithm> ...

  4. 屏蔽QQ黄钻官方团队送礼物的方法

    按照在网上查到的方法: 登录手机QQ \(\longrightarrow\) 好友动态 \(\longrightarrow\) 个人主页 \(\longrightarrow\) 右上角三道杠 \(\l ...

  5. hadoop wordcount程序缺陷

    在wordcount 程序的main函数中,没有读取运行环境中的各种参数的值,全靠hadoop系统的默认参数跑起来,这样做是有风险的,最突出的就是OOM错误. 自己在刚刚学习hadoop编程时,就是模 ...

  6. chrome调试中resource改到application中了

    如题,看视频的时候发现在resource下面查看cookie,但是自己试的时候发现没有了这个工具, google之后发现原来该位置了

  7. java final static 和final区别

    static 和非static 之间的差异,只有当值在运行期间初始化的前提下,这种差异才会揭示出来.因为编译期间的值被编译器认为是相 同的. package thinking; public clas ...

  8. CGI、ASP、PHP、JSP、 ASP.NET网站开发语言比较

    一.主流网站开发语言的简介及优缺点. 现在主流的网站开发语言主要包括cgi.asp.php.asp.net.jsp等. HTML:当然这是网页最基本的语言,每一个服务器语言都需要它的支持. (一)  ...

  9. python之url编码

    import urllib.parsempp='besttest 自动化测试'print(urllib.parse.quote_plus(mpp)) #url编码print(urllib.parse. ...

  10. Codeforces Round #402 (Div. 2) D

    Description Little Nastya has a hobby, she likes to remove some letters from word, to obtain another ...