el-checkbox绑定动态数据发现第一次点击无效，第二次点击才有效

最新推荐文章于 2025-02-12 16:04:19 发布

刘瑜澄

最新推荐文章于 2025-02-12 16:04:19 发布

阅读量4.3k

点赞数 1

分类专栏：记一下 VUE 文章标签： el-checkbox

本文链接：https://blog.youkuaiyun.com/Grantr/article/details/124428949

版权

记一下同时被 2 个专栏收录

20 篇文章

订阅专栏

VUE

4 篇文章

订阅专栏

文章探讨了在使用Vue的el-checkbox组件时，遇到初次点击失效的问题，经排查发现可能与后端传递的字符串isSelected属性有关。作者分享了解决方案，即在初始化数据时强制设置为false，并附带了相关参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-checkbox绑定动态数据发现第一次点击无效，第二次点击才有效

先看一下后端传递的值，为了方便前端勾选，特地让后端加了一个isSelected属性，并初始化为false，但不知道传递过来的是false是String对其会有什么影响，可能是这个原因。
在这里插入图片描述
代码

<template>
    <div v-for="(customer, index) in customerList" :key="index">
      <i type="info"><i class="el-icon-user"></i>{{ customer.customer }}</i><br>
      <el-checkbox v-for="project in customer.projectList" :key="project.projectIdx" v-model="project.isSelected">{{ project.projectName }}</el-checkbox>
      <br><br>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        // 初始面板的数据集合
        customerList: [],
      };
    },
    methods: {
      // 初始化面板和数据
      initCustomerPanel(projectUUID) {
        this.projectService.getGenerateGTMM(projectUUID).then(response => {
          this.customerList = response.data.data;
        })
      }
    },
    created: {
		this.initCustomerPanel();
    }
  }
</script>

但是出现了问题，第一次点击只是框框变色，并没有选中，必须要进行第二次点击才能成功选中，用户友好型low
在这里插入图片描述
我的解决办法是，在给data中的customerList对象赋值的时候，把其中的isSelected值全部都重新赋值为false

initCustomerPanel(projectUUID) {
    this.projectService.getGenerateGTMM(projectUUID).then(response => {
        this.customerList = response.data.data;
        // 给data中customerList对象中的isSelected，
        this.customerList.forEach(e1 => {
            e1.projectList.forEach(e2 => {
                e2.isSelected = false;
            })
        });
    })
},