vue獲取v-model資料型別boolean改變成string
阿新 • • 發佈：2018-11-23
問題描述
今天產品問我一線上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>