Programing

다른 계산 속성을 호출할 때 정의되지 않은 Vue 계산 속성

c10106 2022. 5. 25. 20:09
반응형

다른 계산 속성을 호출할 때 정의되지 않은 Vue 계산 속성

전화를 걸려고 하는데 꼼짝도 못하는 것 같다.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차트가 인식할 수 있는 배열

건설적인 의견을 보내줘서 고마워!

사실, 난 알아냈어.압델하크의 대답이 왜 효과가 있었는지 정말 알 수 없지만, 정말 무엇이 문제의 원인이 되고 있는지 알게 되었다.

myData는 mongo에서 데이터를 가져오는 http 요청 후 정의되며, 해당 데이터를 반환한다.그래서 무슨 일이 일어났는지, 비록 그 요청은 몇 밀리초 후에 이루어졌지만, 내가 그 데이터를 사용하려고 했을 때, 그것은 단지 존재하지 않았다.

다음과 같이 템플릿 내의 div에 추가하여 수정했다.

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

꽤 간단해...귀찮게 해서 미안해 XD

당신은 이것을 루프 전에 참조할 수 있다.

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

참조URL: https://stackoverflow.com/questions/55084058/vue-computed-property-undefined-when-called-in-another-computed-property

반응형