radio v-bind=” 对象” v-model=“checked 值” 不生效 [已解决]

问答 / 409 / 2 / 创建于 4年前 / 更新于 4年前

<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>

learrings

2 声望

暂无个人描述~

0 人点赞

推荐文章：

更多推荐...

博客

多次点击解决方案 18 / 0 |

讨论数量: 2

弧矢

课程读者 1 声望

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

4年前评论

learrings （楼主）

回答评论里不知道怎么使用markdown ,我单写评论了

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

4年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

radio v-bind=” 对象” v-model=“checked 值” 不生效 [已解决]

推荐文章：

首先感谢弧矢的回答。

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

radio v-bind=” 对象” v-model=“checked 值” 不生效 [已解决]

推荐文章：

首先感谢弧矢的回答。

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录