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>
讨论数量: 2

v-bind 用于动态地绑定一个或多个特性,或一个组件 prop 到表达式。

v-model 在表单控件或者组件上创建双向绑定.

这个是官方文档的原话。

<input type="radio" v-bind="obj" v-model="radio_default">

此种 v-bind 使用方式是错误的写法, v-bind 后面需要跟上你要绑定的属性,例如:

<img v-bind:src="imageSrc">
<img :src="imageSrc">

建议你去看一下官方文档。

原文链接:https://cn.vuejs.org/v2/api/#v-bind

2周前 评论
learrings (楼主) 2周前

首先感谢弧矢的回答。

1.根据官方回答:https://cn.vuejs.org/v2/api/#v-bind 是可以绑定对象的

    <!-- 绑定一个有属性的对象 -->
    <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

2.效果如下:

(1)本地代码
Markdown

(2)页面渲染效果(和方式2的页面渲染效果一样,但就是不生效,ε=(´ο`*)))唉)
Markdown

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无法匹配到)
Markdown
Markdown

2周前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!