vux-----修改复选框

最新推荐文章于 2024-08-25 08:00:25 发布

cc&

最新推荐文章于 2024-08-25 08:00:25 发布

阅读量385

点赞数

分类专栏： Vuex 文章标签： javascript linq vue.js

本文链接：https://blog.csdn.net/grow_/article/details/123218460

版权

Vuex 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、：checked="item.done" 动态绑定复选框

2、复选框绑定的函数

  <!-- 复选框 -->
      <a-checkbox
        :checked="item.done"
        @change="
           (e) => {
             cbStatusChange(e, item.id)
            }
          "
          >{{ item.info }}
      </a-checkbox>
  
   methods: {
    // 监听复选框选中状态的变化
    cbStatusChange(e, id) {
      // 获取前的最新选中状态
      // console.log(e.target.checked, id)
      const param = {
        id: id,
        status: e.target.checked
      }
      this.$store.commit('changeStatus', param)
    }
 }

3、vuex-------实现

  mutations: {

   // 修改列表项目的选中状态
    changeStatus(state, param) {
      // 根据id查找对应项的索引
      const i = state.list.findIndex((x) => x.id === param.id)
      // 根据索引，修改对应的元素
      if (i !== -1) {
        state.list[i].done = param.status
      }
    }
  }