美文网首页
vue checkbox

vue checkbox

作者: 小_梦 | 来源:发表于2022-01-29 22:22 被阅读0次

简单介绍一下列表页面checkbox的使用

<van-checkbox-group v-model="checkedArray">
                <van-checkbox
                  @click="onCheckbox(e)"
                  v-show="isEditing"
                  shape="square"
                  :name="e"
                  ref="checkboxes"
                  class="checkbox"
                  v-model="e.checked"
                >
                </van-checkbox>
  </van-checkbox-group>

onCheckbox(ele) {
      ele.checked = !ele.checked;
    },
  • v-model="checkedArray"
    这个checkedArray数组中放置的参数是 :name="e",不需要自己写push、pop来维护,当选中的时候对象e会自动插入checkedArray中,当取消选中的时候会自动把e从checkedArray数组中移除
  • e 是绑定到列表的数组对象
  • v-model="e.checked"
    e对象下有一个属性记录checkbox的选中状态
  • @click="onCheckbox(e)" 绑定函数修改该对象的选中状态值
  • 如果当前点击按钮重新刷新了数据,这个时候还需要默认选中对应的对象,需要把checkedArray中保存的对象替换成当前数据生成的对象
  • ⚠️ 由于默认选中是按照e对象来选中的,如果重新生成对象那么在数组中保存的e对象跟你重新从接口拿到的对象不是一个因此需要做替换
  • ⚠️ 如果e不是对象是一个属性比如:name="e.userId",折无需做数据替换,但是这样也会导致存储在checkedArray只存储了"e.userId",后期从checkedArray中获取别的属性的时候不方便

-- 新手学习vue,如果说的不对勿喷,如果有更好的处理方式请留言,谢谢大家

相关文章

  • Vue学习笔记-遍历el-checkbox

    Vue学习笔记-遍历el-checkout 看上面的例子,都是把el-checkbox放在el-checkbox-...

  • vue checkbox

    html部分 vue部分 效果

  • vue checkbox

    简单介绍一下列表页面checkbox的使用 v-model="checkedArray"这个checkedArra...

  • vue的checkbox

    vue的文档中提到了如何绑定checkbox的数据绑定 当只有单个checkbox时,所穿的checked值为逻辑...

  • vue checkbox 数据更新

    在点击事件方法中,此时的checkArr 未更新,拿到的还是之前的数据解决办法: 可以watch 中监听check...

  • vue使用el-checkbox-group

    前言   就今天,这个问题必须解决。这个问题必须记录。关于vue使用element-ui的el-checkbox-...

  • (33)Vue购物车

    用v-model来双向绑定input控制checkbox是否选中 Vue中双向数据绑定是如何实现的 positio...

  • 2018-04-19 Jquery checkbox 是使用

    判断checkbox 的值 对checkbox 赋值 获取checkbox的值 checkbox 的事件(clic...

  • 原生JS——checkbox操作技巧

    新增checkbox 2.根据type="checkbox"选中所有checkbox 3.修改checkbox选中...

  • Vue基础第二天

    Vue第二天复习 v-model(如果checkbox,select多选是数组,提供一个value属性)(radi...

网友评论

      本文标题:vue checkbox

      本文链接:https://www.haomeiwen.com/subject/jabfkrtx.html