vue checkbox

简单介绍一下列表页面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的文档中提到了如何绑定checkbox的数据绑定 当只有单个checkbox时,所穿的checked值为逻辑...
    戴宙峰阅读 1,912评论 0 0
  • 生命周期函数面试题 1.什么是Vue生命周期?vue生命周期是指vue是对象从创建到销毁的过程。 2.Vue生命周...
    Angel_6c4e阅读 16,752评论 2 51
  • 视频资源来自:b站coderwhy王红元老师——最全最新Vue、Vuejs教程,从入门到精通[https://ww...
    小910888阅读 515评论 0 2
  • 1.1 Vue新建项目语法 基本语法: vue.js引入 [http://127.0.0.1:3334/md/?d...
    神秘码农阅读 343评论 0 1
  • 一、相对于其他框架相比 1、相对于Angular 1.1、相对于angular的api,vue的api更简单,...
    我寄你的信总要送往邮局阅读 893评论 0 4