問題描述
今天產品問我一線上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>