2021-06-16 vue3中使用 watch 全选反选

踟蹰

于 2021-06-16 17:05:10 发布

阅读量542

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/m0_58729897/article/details/117962019

版权

全选反选 vue3中使用watch监听事件，进行反选

vue3 中使用监听属性，进行反选

// 标记全选是否勾中的数据
    let check = ref(false)

// 监听数据变化 watch 第一个参数是要监听的数据 第二个数据变化后的回调函数 ，第三个是配置项
    // 如果监听的是ref数据则可以直接监听 但是如果兼容一个reactive数据变化则要用一个函数返回监听的数据
    watch(() => state.cars, (to, from) => {
      // console.log(to);     // to是所有的数据
      let flag = false
      to.forEach(item => {    // 循环遍历所有的元素
        if(!item.check) {     // 没有被选中的商品，进入循环
          flag = true  // flag是true表示至少有一个商品未被选中
        }
      })
      if(flag) {      // 如果有一个商品没有被选中，就进入循环
        check.value = false   // 全选按钮不选中
      } else {      // 否则的话
        check.value = true    // 选中全选按钮
      }
    }, {
      deep:true // 深度监听
    })