vue2中el-checkbox绑定的数据是null的处理方案

strxiaojie

已于 2024-01-19 11:40:54 修改

阅读量1.1k

点赞数 10

文章标签： vue.js javascript 前端

于 2024-01-19 11:36:25 首次发布

本文链接：https://blog.csdn.net/strxiaojie/article/details/135693616

版权

文章讲述了在使用Vue的ElCheckboxGroup组件时，遇到后端返回null而非空数组导致的TypeError。作者提供了处理方法，即在获取数据后检查并将null转换为[]，确保数组操作的正确性。

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

el-checkbox-group需要绑定的是一个空数组或者是数组，但是后端有可能会偷懒不给你空数组而给你一个null，那么就会报错：

vue.runtime.esm.js:620 [Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'length')"

found in

---> <ElCheckbox> at packages/checkbox/src/checkbox.vue
<ElCheckboxGroup> at packages/checkbox/src/checkbox-group.vue
<Index> at src/silence/event/eventManage/index.vue
<ElMain> at packages/main/src/main.vue
<ElContainer> at packages/container/src/main.vue... (1 recursive calls)
<Layout> at src/admin/views/layout/index.vue
<App> at src/App.vue

那么需要你在获取数据的时候，把后端给你的null修改为[]

    async GetData(val) {
      const res = await GetData(val);
      if (res.status === 200) {
        this.isShow = res.data.id !== 0;//这段我用来判断是否是全局参数的，按照自己的需求来，一般你们是不需要这句代码的。

        this.ruleData = res.data;//把你获取到的参数赋值给一个空的数组，然后使用

        // 检查send_rule是否存在并且是一个数组
        if (Array.isArray(this.ruleData.send_rule)) {
          // 遍历send_rule数组
          this.ruleData.send_rule = this.ruleData.send_rule.map(rule => {
            // 如果send_method是null，则将其转换为一个空数组
            if (rule.send_method === null) {
              return {...rule, send_method: []};
            }
            // 否则，保持原样
            return rule;
          });
        }
      }
    },