问题描述
今天产品问我一线上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>