vue 关于computed 中异步数据如何处理呢？

Question

总是报undefined，如何处理在编辑的时候异步数据处理，困扰好几天，求大佬指点！

这是我自己定义的一个js，页面展示的时候预览效果使用：

export default {
  'chart-bar': {
    name: '柱状图',
    icon: 'imos-iconfont imos-icon-barchart',
    demo: {
      title: '新增需求数量',
      xData: ['星期一', '星期二', '星期三', '星期四', '星期五'],
      yData: [1, 3, 10, 5, 3],
    },
    format: [
      {
        label: '图表标题',
        prop: 'title',
        type: 'input',
        placeholder: '请输入图表标题',
      },
      {
        label: '维度（x轴）',
        prop: 'xData',
        type: 'input',
        placeholder: '请输入X轴(多个以英文逗号隔开)',
      },
      {
        label: '维度（y轴）',
        prop: 'yData',
        type: 'input',
        placeholder: '请输入Y轴(多个以英文逗号隔开)',
      },
    ],
  },
  'chart-line': {
    name: '折线图',
    icon: 'imos-iconfont imos-icon-linechart',
    demo: {
      title: '新增需求数量',
      xData: ['星期一', '星期二', '星期三', '星期四', '星期五'],
      yData: [1, 3, 10, 5, 3],
    },
    format: [
      {
        label: '图表标题',
        prop: 'title',
        type: 'input',
        placeholder: '请输入图表标题',
      },
      {
        label: '维度（x轴）',
        prop: 'xData',
        type: 'input',
        placeholder: '请输入X轴(多个以英文逗号隔开)',
      },
      {
        label: '维度（y轴）',
        prop: 'yData',
        type: 'input',
        placeholder: '请输入Y轴(多个以英文逗号隔开)',
      },
    ],
  },
  'chart-line-area': {
    name: '面积图',
    icon: 'imos-iconfont imos-icon-AreaChart',
    demo: {
      title: '面积图',
      xData: ['星期一', '星期二', '星期三', '星期四', '星期五'],
      yData: [
        {
          name: 'Email',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: 'Video Ads',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: 'Direct',
          data: [320, 332, 301, 334, 390, 330, 320],
        },
      ],
    },
    format: [
      {
        label: '图表标题',
        prop: 'title',
        type: 'input',
        placeholder: '请输入图表标题',
      },
      {
        label: '维度（x轴）',
        prop: 'xData',
        type: 'input',
        placeholder: '请输入维度X轴(多个以英文逗号隔开)',
      },
      {
        label: '维度（y轴）',
        prop: 'yData',
        type: 'input',
        placeholder: '请输入维度Y轴(多个以英文逗号隔开)',
      },
    ],
  },
  'chart-pie': {
    name: '饼图',
    icon: 'imos-iconfont imos-icon-piechart',
    demo: {
      title: '新增需求数量',
      category: ['星期一', '星期二', '星期三', '星期四', '星期五'],
      data: [1, 3, 10, 5, 3],
    },
    format: [
      {
        label: '图表标题',
        prop: 'title',
        type: 'input',
        placeholder: '请输入图表标题',
      },
      {
        label: '维度（类别）',
        prop: 'category',
        type: 'input',
        placeholder: '请输入维度(多个以英文逗号隔开)',
      },
      {
        label: '维度（饼图值）',
        prop: 'data',
        type: 'input',
        placeholder: '请输入维度(多个以英文逗号隔开)',
      },
    ],
  },
  'indicate-card': {
    name: '卡片',
    icon: 'imos-iconfont imos-icon-card',
    demo: {
      name: 'A',
      value: 69023,
      percent: '+10%',
    },
    format: [
      {
        label: '指标名称',
        prop: 'name',
        type: 'input',
        placeholder: '请输入指标名称',
      },
      {
        label: '指标值',
        prop: 'value',
        type: 'input',
        placeholder: '请输入指标值',
      },
      {
        label: '指标涨幅',
        prop: 'percent',
        type: 'input',
        placeholder: '请输入指标涨幅',
      },
    ],
  },
};

这是compForm定义：

compForm: {
        appId: '',
        name: '',
        nameEn: '',
        status: 'NORMAL',
        roleIds: [],
        tagIds: [],
        type: 'DATASOURCE',
        modes: 'chart-bar',
        url: '',
        target: '',
        exts: '123',
        updateTime: '',
      },

提交代码到后台

onSaveComment() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.compForm.type == 'DATASOURCE') {
            this.formatData = this.$refs.children.form;
            this.compForm.modes = this.compForm.modes.replace(/-/g, '').toUpperCase();
            const params = {
              ...this.compForm,
              thumbnail: this.thumbnail,
              format: JSON.stringify(this.formatData),
              style: JSON.stringify(this.style),
            };
            createComment(params).then(() => {
              console.log('sdsdadsa');
              this.$message.success('创建组件成功');
              this.goBack();
            });
          } else {
            this.del(this.compForm, 'updateTime', 'target', 'modes', 'thumbnail', 'exts');
            const params = {
              ...this.compForm,
            };
            createComment(params).then(() => {
              this.$message.success('创建页面成功');
              this.goBack();
            });
          }
        }
      });
    },

Answer 1

compConfig这个数据在哪里定义的？