radio v-bind=” 对象” v-model=“checked 值” 不生效 [已解决]
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-for="obj in radios" v-bind:key = "obj.id">
<!-- 使用方式1：这种方式不生效，为什么？ -->
<input type="radio" v-bind="obj" v-model="radio_default">
<!-- 使用方式2：这种方式生效 -->
<!-- <input type="radio" v-bind:id="obj.id" v-bind:value="obj.value" v-model="radio_default"> -->
<label v-bind:for="obj.id">{{obj.value}}</label>
</span>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
radios:[{id:1,value:'one'},{id:2,value:'two'},{id:3,value:'three'}],
radio_default:'two'
}
})
</script>
</body>
</html>
关于 LearnKu
粤公网安备 44030502004330号
v-bind 用于动态地绑定一个或多个特性，或一个组件 prop 到表达式。
v-model 在表单控件或者组件上创建双向绑定.
这个是官方文档的原话。
此种 v-bind 使用方式是错误的写法， v-bind 后面需要跟上你要绑定的属性，例如：
建议你去看一下官方文档。
原文链接：https://cn.vuejs.org/v2/api/#v-bind
首先感谢弧矢的回答。
1.根据官方回答：https://cn.vuejs.org/v2/api/#v-bind 是可以绑定对象的
2.效果如下：
（1）本地代码
（2）页面渲染效果（和方式2的页面渲染效果一样，但就是不生效，ε=(´ο｀*)))唉）
3.经过分析源码找到问题原因
（1）v-model 寻找radio中匹配的默认值需要用到 v-bind:value 或 :value 或 value(第二张图else部分)，但源码上v-bind=‘obj’(此时还没有拆解为v-bind:id='obj.id' v-bind:value='obj.value'，所以v-model无法匹配到)