다른 계산 속성을 호출할 때 정의되지 않은 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);
}`
'Programing' 카테고리의 다른 글
Linux의 기본 GUI API란? (0) | 2022.05.25 |
---|---|
Vue 1.x/2.x: $route 개체에서 vue-router 경로 URL 가져오기 (0) | 2022.05.25 |
상태 변경으로 업데이트되지 않는 Vue UI (0) | 2022.05.24 |
Java에서 c 함수 호출 (0) | 2022.05.24 |
포인터 유효성 테스트(C/C++) (0) | 2022.05.24 |