Question

我似乎很想尝试从另一个计算属性中的一个计算属性调用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' }), }值。

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

series

我正在尝试根据以下示例绘制图表：https://apexcharts.com/vue-chart-demos/line-charts/data-labels/

因为我想通过实时Feed动态更改此数据，所以每隔几秒钟就会更新一次，因此我将data()数组移到了包含对象的数组上，以便从{{1} }功能添加到computed:属性列表中。

是的，我对此进行了测试，将其移动后保持不变，并且图表运行良好。

我的问题来自我试图在myData计算属性中引用series计算属性的地方。无论我如何尝试（this.myData，this.myData()，myData，myData()），它总是以未定义的形式返回。

我发现这很不寻常，因为在先前的计算属性myTime中，我引用了this.myData.doc[].xxx没问题。

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

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},
  ]
}

因此，应该起作用的方法是从doc中迭代myData数组，提取出co2值，然后将其推到图表将在其中放置的适当series[i].data数组中认出来。

感谢所有建设性的投入！

Answer 1

实际上，我知道了。我真的不知道Abdelhak的答案为什么起作用，但是我发现了真正导致问题的原因。

myData是在http请求（从mongo中获取数据）返回该数据之后定义的。所以发生了什么事，即使请求在毫秒后得到满足，在我尝试使用该数据时，也就没有了。

我通过将其添加到模板中的div来解决此问题：

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

非常简单...很抱歉打扰您整个XD

Answer 2

您可以在循环之前参考

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

在另一个计算属性中调用时，Vue计算属性未定义

2 个答案: