"一，场景通过使用 checkbox，实现如图的场景，点击某个 tag，实现选中和非选中状态。 [图片] 二，官网的例子通过切换 checked 值为 true 或者 false 来实现，一个 checkbox 的状态切换 ?12345678910111213 备选项　　效果如下： [图片] ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 33 浏览 • 4 个月前

vue与element ui的el-checkbox的坑

一，场景

通过使用 checkbox，实现如图的场景，点击某个 tag，实现选中和非选中状态。

二，官网的例子

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

<template>
  <!-- `checked` 为 true 或 false -->
  <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() {<br>        //获取数据用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>　　

到这以为实现了功能，看效果发现问题: 点击时候，没有勾上，只有框变了颜色。

排查问题.....

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

猜测：

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 属性情况打印出来分别如 1 和图 2

图 1 图 2

对比一下发现，前端添加 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！！

五，总结。

这个问题是我在项目中遇到的问题，通过一步一步锁定问题之后，抽出来做了最精简版本，故做此总结，也给其他遇到坑的童鞋一点点帮助。

ps，每次用 element ui 都会有一些感触，苦笑。

vue与element ui的el-checkbox的坑

相关帖子

随便看看

vue与element ui的el-checkbox的坑