반응형
[Vue warn] :생성된 후크 오류: "TypeError: 정의되지 않은 속성을 설정할 수 없습니다"
VueJS 어플리케이션을 만들고 있습니다.부모로부터 데이터가 전달되는 Child.vue라는 하위 구성 요소가 있습니다.
Child.vue
export default{
props:['info'],
data: function(){
return{
timeValue:{
minutes: '',
hours: ''
}
}
},
created: function(){
console.log("Printing inside created of Child ",this.info);
this.convertMins(this.info[0][2]);
},
methods:{
convertMins: (minutes) => {
console.log("Printing inside convert mins", this);
if(minutes===0){
this.timeValue.minutes = 0;
this.timeValue.hours = 0;
}
if(minutes===60){
this.timeValue.hours = 1;
this.timeValue.minutes = 0;
}
if(minutes>60){
this.timeValue.hours = Math.floor(minutes/60);
this.timeValue.minutes = minutes % 60;
}
}
}
}
그리고 제 부모 구성 요소는 이렇게 생겼고
Parent.vue
import Child from './Child.vue';
export default {
data(){
return{
info:[ ],
errors: []
}
},
created: function(){
this.accessInformation();
},
methods: {
accessInformation: function(){
axios.get(localhost:3000/retrieveInfo)
.then(response =>{
console.log(response.data.rows[3]);
this.info.push(response.data.rows[3]);
})
.catch(e => {
this.errors.push(e);
})
}
},
components: {
'child': Child,
}
}
<template>
<div>
<child v-bind:info="info" v-if="info.length > 0"></child>
</div>
</template>
응용 프로그램을 실행하려고 하면 다음과 같은 오류가 발생합니다.
이 에러가 발생하는 이유제가 VueJs에 처음 왔는데 누가 좀 도와주실 수 있나요?
화살표 함수를 사용하여 메서드를 정의하지 마십시오.https://vuejs.org/v2/guide/instance.html#Data-and-Methods 에서 경고 상자를 참조하십시오.
this
화살표 함수는 상위 컨텍스트를 가리키므로 여기서는 Vue 개체가 아닌 창 개체를 가리킵니다.
대신convertMins: (minutes) => {}
,사용하다convertMins(minutes) {}
.
언급URL : https://stackoverflow.com/questions/47525044/vue-warn-error-in-created-hook-typeerror-cannot-set-property-of-undefined
반응형
'programing' 카테고리의 다른 글
C에서 어레이 선언 및 초기화 (0) | 2022.09.01 |
---|---|
마운트된 이벤트에서 vue 구성 요소 데이터 멤버에 값을 할당하는 방법 (0) | 2022.09.01 |
Python Flask 서버를 통해 Vue 앱이 로드되지 않음 (0) | 2022.09.01 |
vuejs의 다른 컴포넌트 내부에 있는 입력에 초점을 맞추고 있습니까? (0) | 2022.09.01 |
maven jar-with-dependencies의 이름을 변경할 수 있습니까? (0) | 2022.09.01 |