Element: el-checkbox 通过vuex修改checked checked状态没有改变

Created on 20 Mar 2017 · 14Comments · Source: ElemeFE/element

<div v-for='(item,index) in test' @click='qtest'>
<el-checkbox @change='changeDialogEnd($event, index)' :checked='item.dialogEnd'>输出后结束对话</el-checkbox>
</div>

通过修改checked的值重新渲染页面发现不可行

Source

zuank

Most helpful comment

解决了

把checked换成value

zuank on 21 Mar 2017

👍14

All 14 comments

试一下用 Vue.set(state, state_name, state_value) 去修改store中的数据

Leo555 on 20 Mar 2017

@Leo555 我自己测试是不成功的

我尝试不使用vuex 将el-checkbox 通过v-for 渲染多个

然后通过修改data值修改checked状态也是不成功的

zuank on 20 Mar 2017

可以将代码贴到 jsfiddle 我帮你看下吗？

Leo555 on 20 Mar 2017

@Leo555
我大概确认了是el-checkbox不能通过 :checked来做修改

<el-checkbox :checked='dialogEnd'>输出后结束对话</el-checkbox> <span @click='dialogEnd = !dialogEnd'>测试</span>

我打印了dialogEnd 是在变化的

zuank on 20 Mar 2017

@Leo555

你好这个你有相关的解决方案么

zuank on 20 Mar 2017

@zuank
我写了个demo，你看下能否满足你的需求。https://jsfiddle.net/Leo555/n9jmu5v7/842/

Leo555 on 20 Mar 2017

很抱歉这个好像是不可以的

类型于 v-for el-card

el-card里面会有选中框所以每一个选中框的label值是一样的

我使用checked 在删除某一个el-card后重新渲染

el-checkbox 的checked会有问题

zuank on 21 Mar 2017

解决了

把checked换成value

zuank on 21 Mar 2017

👍14

为什么我也是用v-for循环出checkbox只有绑定:checked才能实现勾选交互,换成:value和:v-model后,点击checkbox都无反应

morganfly on 3 Aug 2017

@morganfly 看一下log是不是事件被触发了两次。

zuank on 5 Aug 2017

@zuank 用:value可以改变值，用:checked不能改变值，请重开issue，有问题

weituotian on 3 Jul 2018

<el-form-item 
    v-for="item in authorityArr" 
    :key="item.id"
    :label="item.name" 
    style="display:inline-block;width:800px" 
    label-width="100px">        
    <el-checkbox 
      @change="handleCheckAllChange(item.id)">全选</el-checkbox>
    <div style="margin: 15px 0;" />
    <el-checkbox-group v-model="checkedAuthorityArray">
      <el-checkbox 
        v-for="obj in item.authorityVos"
        :key="obj.id" 
        :label="obj.id"
        :checked="obj.checked"  // 我这里改成 :value 依旧没有变化 
        >{{ obj.remark +`${obj.checked}`}}</el-checkbox>
    </el-checkbox-group>
  </el-form-item>