vue与element ui的el-checkbox的坑

最新推荐文章于 2025-04-11 11:15:33 发布

looking for my girl

最新推荐文章于 2025-04-11 11:15:33 发布

阅读量517

点赞数 3

文章标签： vue.js 前端 elementui

本文链接：https://blog.youkuaiyun.com/huangqian__/article/details/132367782

版权

文章讲述了作者在使用Vue开发时遇到的问题，即如何在遍历数组时动态绑定checkbox的checked属性。通过官网示例和实践，发现Vue对动态添加的属性不会自动监听，最终通过`$set`方法解决了视图未更新的问题。

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

一、出现问题的场景

遍历一个数组，使用checkbox，点击某个tag，实现选中和非选中状态

二，官网的例子

经过切换checked值为true或者false来实现，一个checkbox的状态切换

 <template>
  	<el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked: true
      }
    }
  }
</script>

三、思考，测试

经过循环li，给数据添加checked属性，并绑定到v-model上，来实现一的场景。模板代码以下：

<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) in list" :key="index">  //循环li
        <el-checkbox v-model="item.checked">  //v-model绑定到每一个item的checked属性
          {{ item.name }}
        </el-checkbox>
      </li>
    </ul>
  </div>
</template>

后台返回数据格式（已精简），以下（没有checked属性）

[
        { id: 1, pid: 1, name: '地区' },
        { id: 2, pid: 2, name: '游戏类型' },
        { id: 3, pid: 4, name: '性别' },
        { id: 4, pid: 5, name: '设备类型' },
        { id: 5, pid: 6, name: '休闲时间' },
        { id: 6, pid: 7, name: '王者荣耀' },
        { id: 7, pid: 8, name: '音乐' },
        { id: 8, pid: 9, name: '品牌手表' },
        { id: 9, pid: 10, name: '相机' },
        { id: 10, pid: 12, name: '游戏人群' },
      ]

我要作的， mounted方法获取后台数据，再给每条数据循环添加checked属性，初始值为false

<script>
  export default {
    name: 'demo',
    data() {
      return {
        list: [],
        allTags: [],
      }
    },
    methods: {
      getList() {
        //获取数据用settimeout模拟
        setTimeout(() => {
          this.allTags = [
            { id: 1, pid: 1, name: '地区' },
            { id: 2, pid: 2, name: '游戏类型' },
            { id: 3, pid: 4, name: '性别' },
            { id: 4, pid: 5, name: '设备类型' },
            { id: 5, pid: 6, name: '休闲时间' },
            { id: 6, pid: 7, name: '王者荣耀' },
            { id: 7, pid: 8, name: '音乐' },
            { id: 8, pid: 9, name: '品牌手表' },
            { id: 9, pid: 10, name: '相机' },
            { id: 10, pid: 12, name: '游戏人群' },
          ]
          this.allTags.map(item => {
            item.checked = false
            return item
          })
          this.list = this.allTags
        }, 1500)
      },
    },
    mounted() {
      this.getList()
    },
  }
</script>

到这觉得实现了功能，打开页面看看效果发现问题: 点击的时候，没有勾上emmmmmmmmm…

排查问题…

 （脑补痛苦过程......）

  猜想：

    1，element不支持这种方法绑定，只能按官网例子中，循环el-checkbox来实现。

    2，vue绑定问题

  针对问题1：  换成了循环el-checkbox，发现结果是同样的不行。 否认！

  剩下的就是猜想二：

        人为把返回数据默认加上checked属性， 即data格式为：

 [
            { id: 1, pid: 1, name: '地区', checked: false},
            { id: 2, pid: 2, name: '游戏类型' , checked: false},
            { id: 3, pid: 4, name: '性别' , checked: false},
            { id: 4, pid: 5, name: '设备类型' , checked: false},
            { id: 5, pid: 6, name: '休闲时间' , checked: false},
            { id: 6, pid: 7, name: '王者荣耀', checked: false },
            { id: 7, pid: 8, name: '音乐', checked: false },
            { id: 8, pid: 9, name: '品牌手表' , checked: false},
            { id: 9, pid: 10, name: '相机' , checked: false},
            { id: 10, pid: 12, name: '游戏人群' , checked: false},
          ]

测试发现，这样能行。。。

     迷茫。。。

     而后在控制台打印数据，对比了一下结果。

     前端添加checked属性的状况 和 后台返回数据原本就有checked属性状况 打印出来

对比一下发现：前端添加checked属性， vue并无添加get set方法，所以，监听不到checked值变化，进而不能更新view。这点，能够在浏览器vue调试中看到，点击时候数据的checked属性 true和false是在交替变化，可是view上没同步更新。

四，解决方法

    两种方法，
    1， 拿到值不赋值给data属性的allTags，而是定义临时变量let， 操做完以后，赋值给list，即：

<script>
  export default {
    name: 'demo',
    data() {
      return {
        list: [],
      }
    },
    methods: {
      getList() {
        //获取数据用settimeout模拟
        setTimeout(() => {
         let allTags = [  //这里let定义allTags
            { id: 1, pid: 1, name: '地区' },
            { id: 2, pid: 2, name: '游戏类型' },
            { id: 3, pid: 4, name: '性别' },
            { id: 4, pid: 5, name: '设备类型' },
            { id: 5, pid: 6, name: '休闲时间' },
            { id: 6, pid: 7, name: '王者荣耀' },
            { id: 7, pid: 8, name: '音乐' },
            { id: 8, pid: 9, name: '品牌手表' },
            { id: 9, pid: 10, name: '相机' },
            { id: 10, pid: 12, name: '游戏人群' },
          ]
          allTags.map(item => {
            item.checked = false
            return item
          })
          this.list = allTags
        }, 1500)
      },
    },
    mounted() {
      this.getList()
    },
  }
</script>

2 (推荐)，用vue.$set方法，强制vue监听checked属性

<script>
  export default {
    name: 'demo',
    data() {
      return {
        list: [],
      }
    },
    methods: {
      getList() {
        //获取数据用settimeout模拟
        setTimeout(() => {
         this.allTags = [  //这里let定义allTags
            { id: 1, pid: 1, name: '地区' },
            { id: 2, pid: 2, name: '游戏类型' },
            { id: 3, pid: 4, name: '性别' },
            { id: 4, pid: 5, name: '设备类型' },
            { id: 5, pid: 6, name: '休闲时间' },
            { id: 6, pid: 7, name: '王者荣耀' },
            { id: 7, pid: 8, name: '音乐' },
            { id: 8, pid: 9, name: '品牌手表' },
            { id: 9, pid: 10, name: '相机' },
            { id: 10, pid: 12, name: '游戏人群' },
          ]
          this.allTags.map(item => {
            //item.checked = false
            this.$set(item, 'checked', false) // 这里，给对象添加属性，用$set方法。
            return item
          })
          this.list = this.allTags
        }, 1500)
      },
    },
    mounted() {
      this.getList()
    },
  }
</script>

done！！

五，总结。

   这个问题是我在项目中遇到的问题，经过一步一步锁定问题以后解决掉，故作此总结，也给其余遇到坑的童鞋一点点帮助。