账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    v-bind:checked无效。
    38
    0

    我在radio组件里绑定了一个checked,但是并没有动态更新。

    <td>
        <input type="radio" :checked="picked">
        <button @click="resets(index)">取消</button>
    </td>
    

    picked的初始

        {
            picked:false
        }
    

    JS取消的代码

          
          resets:function(index){
            
            this.picked=false;
        }
    

    我本来觉得初始状态单选框未选中,选中之后picked会变成true,然后通过取消再变成flase,radio变回未选中。但是好像picked并没有变。当单选框选中之后,取消就用不了了

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • v-bind 是 Vue.js 中的一个语法特性,用于在 HTML 元素中绑定 reactive 标签,从而创建可实时更新的视图。然而,当 v-bind 标签的 checked 属性设置为 false 时,Vue 将不会实时更新对应的视图元素的 checked 属性值,这被称为 v-bind 标签的验证绑定失效。

      以下是一个简单的例子,说明了为什么 v-bind 标签的 checked 属性在 false 时无法被实时更新:

      ```html

      ```

      在这个例子中,我们定义了一个 name 数据属性,并在模板中通过 v-bind 标签将其绑定到一个 input 元素的 idvalue 属性上。我们还定义了一个 updateName 方法,该方法在数据属性的更新事件触发时被调用,这个方法改变了 name 数据的值,并更新了 name 的验证绑定状态。

      然而,当我们设置 name 的值为 false 时,v-bind 标签的验证绑定失效,因为 name 的值没有被赋值给 name 元素。因此,<label> 元素的 v-bind:checked 标签的值在渲染时不会被更新为 false,而是默认为 true,导致 input 元素的 checked 属性的值仍然为 true

      要使 v-bind 标签的验证绑定失效,可以使用 v-bind:requiredv-bind:pattern 属性,如下所示:

      ```html

      ```

      在这个例子中,我们使用 v-bind:required 属性将 name 数据的验证绑定设置为 true,即使 name 的值为 false<label> 元素的 v-bind:checked 标签的值也会被更新为 false。这样,input 元素的 checked 属性的值就会被正确地更新为 false,触发 v-bind 标签的验证绑定失效。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部