0
点赞
收藏
分享

微信扫一扫

vue全选反选

Hyggelook 2022-03-12 阅读 72

一、当数据在父组件 并在父组件改变

小选框加入这个值

v-model="item.checked"/

全选框加入这个值

v-model="isAll"

函数写在computed里面

    isAll:{
      get(){
        return this.arr.every(v=>v.c)//v.c是v.c===true的简写
      },
      set(val){
        this.arr.forEach(v=>{v.c=val})
      }
    }

二、当数据在父组件 子组件里使用、改变值

在子组件的小选框中将v-model="item.checked"改成以下内容

:checked="item.done"
@change="iptChange(item.id)"

添加方法 把对应的id传给父组件

  methods: {
    iptChange(id) {
      this.$emit('on-iptChange',id)
    },
  },

父组件接收方法

@on-iptChange='iptChangeFn'

父组件书写对应方法

    iptChangeFn(id){
      let todo=this.list.find(v=>v.id==id)
      todo.done=!todo.done
    }
举报

相关推荐

0 条评论