Vue computed 属性在另一个 computed 属性中调用时未定义

Question

我似乎无法尝试从一个计算的属性调用另一个计算的属性中的 return 值。

到目前为止我的代码是这样的：

  computed: {
    myTime() {
      var date = new Date(this.myData.doc[9].time);
      return date.toString("YYYY MMM dd hh:mm").substring(0,24);
    },

    myName() {
      return this.$store.getters.findName(this.id)
    },

    series() {

      var series =  [
        {
          name: "TMP",
          data: [28, 29, 33, 36, 32, 32, 33]
        },
        {
          name: "HUM",
          data: [12, 11, 14, 18, 17, 13, 13]
        },
        {
          name: "CO2",
          data: []
        }
      ];

      for (var i = 0; i < 10; i++) {
        series[2].data.push(((this.myData.doc[i].co2*10)*100)/3000);
      }

      return series;
    },

    myData() {
      return this.$store.state.graphData.find(obj => obj.id == this.id)
    },

    ...mapGetters({
    }),

    ...mapState({
      newSettings: 'newSettings',
      graphDatagraphData'
    }),
  }

我正在做的是尝试根据这个例子绘制图表：https://apexcharts.com/vue-chart-demos/line-charts/data-labels/

因为我想通过每隔几秒更新一次的实时提要动态更改此数据，所以我移动了包含对象的 series 数组，以便在图表上从 data() 函数到 computed: 属性列表。

是的，我对此进行了测试，移动后没有改变，图表效果很好。

我的问题是我试图从 series 计算的属性中引用 myData 计算的属性。无论我如何）尝试（this.myData、this.myData()、myData、myData()），它总是返回未定义。

我觉得这很不寻常，因为在之前计算的属性、myTime 中，我引用 this.myData.doc[].xxx 没有问题。

是的，这可能属于 this.$store.getters 部分，但我想知道为什么在计算 myTime 和 series 之间调用 this.myData 时存在差异属性。

myData 属性类似于：

{
  id: "xxxxxxxxxxxxxx",
  doc: [
    {co2: 1800, tmp: 20, hum: 50},
    {co2: 1800, tmp: 20, hum: 50},
    {co2: 1800, tmp: 20, hum: 50},
    {co2: 1800, tmp: 20, hum: 50},
    {co2: 1800, tmp: 20, hum: 50},
    {co2: 1800, tmp: 20, hum: 50},
  ]
}

所以它应该工作的方式是从 myData 中向下迭代 doc 数组，提取 co2 值，并将其推送到适当的 series[i].data 数组，其中图表会识别它。

感谢所有建设性的意见！

Answer 1

你可以在循环之前引用这个

` let self=this; 
  for (var i = 0; i < 10; i++) {
    series[2].data.push(((self.myData.doc[i].co2*10)*100)/3000);
  }`

Answer 2

其实，我想通了。我真的不知道为什么 Abdelhak 的回答有效，但我发现了真正导致问题的原因。

myData 是在 http 请求之后定义的，从 mongo 获取数据，returns 该数据。所以发生了什么，即使请求在几毫秒后得到满足，但在我尝试使用该数据时，它并不存在。

我通过在模板中添加 div 来修复它，如下所示：

<template lang="html">
    <div v-if="myData">Do everything I want</div>
    <div v-else>Loading Data</div>
</template>

很简单...抱歉打扰了你XD

Vue computed 属性在另一个 computed 属性中调用时未定义

Vue computed property undefined when called in another computed property

vuejs2

vuex

apexcharts

Vue computed 属性 在另一个 computed 属性 中调用时未定义

Vue computed property undefined when called in another computed property

vuejs2

vuex

apexcharts

Vue computed 属性在另一个 computed 属性中调用时未定义