Вычисляемое свойство Vue не определено при вызове в другом вычисляемом свойстве - PullRequest
Новая
       48

Вычисляемое свойство Vue не определено при вызове в другом вычисляемом свойстве

0 голосов
/ 10 марта 2019

Кажется, я застрял, пытаясь вызвать значение 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:.

Да, я проверил это без изменений после его перемещения, и диаграмма прекрасно работает.

Мой вопрос возникает, когда я пытаюсь сослаться на вычисляемое свойство 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, где диаграмма его распознает.

Спасибо за все конструктивные данные!

Ответы [ 2 ]

1 голос
/ 10 марта 2019

На самом деле, я понял это.Я действительно не знаю, почему ответ Абдельхака сработал, но я выяснил, что на самом деле вызывало проблему.

myData определяется после того, как http-запрос, извлекающий данные из mongo, возвращает эти данные.Итак, что происходило, несмотря на то, что запрос был выполнен через миллисекунды, в то время, когда я пытался использовать эти данные, его просто не было.

Я исправил это, добавив к div-элементам в шаблоне вот так: 

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

Довольно просто ... Извините, что беспокою вас по этому поводу XD

0 голосов
/ 10 марта 2019

Вы можете сослаться на это до цикла 

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