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的更多相关文章
- JS魔法堂:函数重载 之 获取变量的数据类型
Brief 有时我们需要根据入参的数据类型来决定调用哪个函数实现,就是说所谓的函数重载(function overloading).因为JS没有内置函数重载的特性,正好给机会我们思考和实现一套这样的机 ...
- typeof获取变量的数据类型 javascript
获取变量的数据类型:typeof <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Vue获取dom和数据监听
Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...
- java封装数据类型——Boolean
众所周知,java对常见的原始数据类型都提供了对应的封装类型,增加一些常用的特性(如 计算hash值.比较相等.类型转换等),以扩展他们对数据处理的能力,使得他们更好地适应面向对象编程的各种场景.今天 ...
- Java知识日常收集整理001Java获取变量的数据类型的实现方法
一.具体情况区分 对于简单类型变量,是无法直接获得变量类型的:要想获取,必须自定义函数进行返回. 对于包装类型变量,是可以直接获得的,变量名称.getClass().getName(); 二.代码实现 ...
- vue获取下拉框值
vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...
- vue获取当前元素
Html: <li><a href="#" v-on:click="typeStyle">萨克斯萨克<span></s ...
- 获取v$latch数据源实验
实验环境:Oracle Rac 11.2.0.3 首先获取v$latch的定义:通过PL/SQL或者get ddl等常规途径只能获取到v_$latch相关的视图信息.需要通过特殊方法获取v$latch ...
- 实现一个函数clone,可以对JS中的5种数据类型(Number、String、Object、Array、Boolean)进行值复制
实现一个函数clone,可以对JS中的5种数据类型(Number.String.Object.Array.Boolean)进行值复制
随机推荐
- h.264的POC计算(转载)
转自:http://www.cnblogs.com/TaigaCon/p/3551001.html 本文参考自http://wenku.baidu.com/link?url=ZPF0iSKzwLQg_ ...
- 详细讲解:零知识证明 之 ZCash 完整的匿名交易流程
作者:林冠宏 / 指尖下的幽灵 博客:http://www.cnblogs.com/linguanh/ 掘金:https://juejin.im/user/587f0dfe128fe100570ce2 ...
- postman接口测试系列: 时间戳和加密
在使用postman进行接口测试的时候,对于有些接口字段需要时间戳加密,这个时候我们就遇到2个问题,其一是接口中的时间戳如何得到?其二就是对于现在常用的md5加密操作如何在postman中使用代码实现 ...
- Ubuntu 18.04 LTS 安装过程
电脑: acer 1. F12开启boot menu,如果没开启,F2进去开启 2. 早点插优盘,否则进入F12的时候检测不出来,选择U盘启动,先不安装试用,进入桌面后有安装文件再安装,想直接安应该也 ...
- 2019 年 Vue 学习路线图!
如果你是 Vue 开发新手,可能已经听过很多行话术语,比如单页面应用程序.异步组件.服务器端渲染,等等.你可能还听说过与 Vue 有关的一些工具和库,比如 Vuex.Webpack.Vue CLI 和 ...
- scanf()和scanf_s()
在最初的C语言中,原版的输入就是scanf("<格式化字符串>",<地址表>) ANSI C中没有scanf_s(),只有scanf(),scanf()在读 ...
- Caffe实战二(手写体识别例程:CPU、GPU、cuDNN速度对比)
上一篇文章成功在CPU模式下编译了Caffe,接下来需要运行一个例程来直观的了解Caffe的作用.(参考:<深度学习 21天实战Caffe>第6天 运行手写体数字识别例程) 编译步骤: C ...
- ui自动化测试的意义与理解
分层测试的思想 分层测试(有的也叫测试金字塔)是最近几年慢慢流行.火热起来的,也逐渐得到了大家的认可,大家应该已经比较熟悉分层测试的思想了,不太了解的可以自行找一些相应的渠道去补充一下上下文的知识. ...
- Backbone学习记录(5)
数据与服务器 var User=Backbone.Model.extend({ defaults:{ name:'susan', age:18 }, url:'/user'//数据提交的路径 }); ...
- CF 602 D. Lipshitz Sequence 数学 + 单调栈 + 优化
http://codeforces.com/contest/602/problem/D 这题需要注意到的是,对于三个点(x1, y1)和(x2, y2)和(x3, y3).如果要算出区间[1, 3]的 ...