-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
root 컴포넌트에서 undefined로 받습니다.
21.08.17 20:40 작성 조회수 328
1
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
선생님 안녕하세요.
제가 진행한 부분은 root 컴포넌트에 데이터를 event발생하여 전달하는 부분까지 진행했습니다.
app-content에서는 num = 10이 잘 등록되었는데,
버튼 이벤트를 발생할 때는 root 컴포넌트에는 undefined로 인식하여 이 값을 대입하는 현상이 있습니다.
오타도 안 난 듯 한데.. 어디서 문제인지 갑이 잡히지 않습니다. ㅠㅠ
에러 : Property or method is not defined on the instance but referenced during render
소스 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Vue 외부 스크립트 호출 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<app-header></app-header>
<app-content v-on:pass="resultNum(value)"></app-content>
</div>
<script>
Vue.config.devtools = true; // 개발도구 사용여부(이건 제가 별도로 찾아서 적용했습니다.)
var appHeader = {
template: '<div>header</div>'
};
var appContent = {
// passNum 이라는 버튼을 클릭했을 때 appHeader로 데이터를 전달하는 방법
// → Root 컴포넌트로 event 발생시키고 appHeader로 props 전달한다.
// 이때 Root 컴포넌트에서 하위 컴포넌트로 props를 실행하려면 데이터를 선언해야 한다.
template: '<div>content'
+ '<button v-on:click="passNum">header로 전달</button>'
+ '</div>',
methods: {
passNum: function() {
this.$emit('pass', 10);
}
}
};
// root 컴포넌트
new Vue({
el: '#app',
components: {
'app-header': appHeader,
'app-content': appContent
},
data: {
num: 0
},
methods: {
resultNum: function(value) { // num 받기
this.num = value;
}
}
});
</script>
</body>
</html>
답변을 작성해보세요.
3
마비미
2021.11.09
2달이 지났지만..
resultNum 에 value 가 암묵적으로 넘어오게 돼서 resultNum(value) 가 아니라 resultNum 만 적어주면 오류가 나지 않습니다..!
장기효(캡틴판교)
지식공유자2023.10.09
제가 확인이 늦었네요. 본문에 적어주신 형태대로 resultNum(value)을 선언하시게 되면 value가 템플릿 표현식에 있는 value 값으로 찾게 됩니다. 강의에서 안내한 대로 작성하시는 걸 추천드릴게요 :)
0
장기효(캡틴판교)
지식공유자2023.10.09
템플릿 표현식에 메서드를 연결하는 부분에서 많은 분들이 헷갈려 하시는 것 같네요. 강의에서 안내해 드린대로 메서드 이름을 연결하셔야 합니다. 그렇지 않고 템플릿 표현식에서 resultNum(value) 과 같은 형태로 선언하시게 되면 템플릿 표현식에서 정의된 value 값을 찾게 됩니다.
자세한 내용은 아래 문서 참고하세요.
https://vuejs.org/guide/essentials/event-handling.html#calling-methods-in-inline-handlers
해당 내용은 다음 후속 강의에서 추가로 설명해 두겠습니다 :)
0
박찬성
2023.10.09
안녕하세요. 해당 문제에 저도 같은 증상을 보이고 있습니다.
v-on:pass="resultNum(10)"
v-on:pass="resultNum"
이렇게 보내면 정상적으로 출력됩니다. 두번째 방법으로 보내면 $emit에서 여러개를 보내도 value1, vaule2 ... 여러개를 받을 수있네요. 감사합니다.
0
으악
2021.09.18
안녕하세요. vue 입문자입니다. 이쪽에 관심이 있어서 수강을 하고있어
같은 학생으로써 저도 궁금해서 글 등록해보았습니다.
<app-content v-on:pass="resultNum(10)"></app-content>맨 위쪽 태그부분에 value 인자 를 10 이라는 숫자로 바꾸니 오류는 없는거같은데,
이렇게 하면 공부하시는 부분에 관해 의도된 실습내용과 거리가 멀어진걸까요?..
자세한 내용은 저도 잘 모르겠네요..
0
장기효(캡틴판교)
지식공유자2021.08.18
안녕하세요 꾸릉님, 질문을 자세히 적어주셔서 감사합니다 :) 코드를 보면 뷰 인스턴스 컴포넌트(루트 컴포넌트)의 데이터 속성 num의 기본 값이 0이고 아래 app-content 컴포넌트에서 이벤트가 발생되면 num의 값이 0에서 10으로 변환되어야 할 것 같아요.
Property or method is not defined on the instance but referenced during render
위 에러 메시지는 템플릿 표현식에서 정의되지 않은 데이터 속성이나 메서드가 선언되어 있으면 표시됩니다. 첨부해 주신 코드 상으로는 크게 문제가 없어 보이는데 여전히 문제 현상이 발생하시나요? :)
uws0331
2022.07.30
현재에도 그 증상이 아직 있는 것 같습니다.
아래의 BeomJun Lee님께서 작성하신 문제해결법에 의하여 해결은 했습니다만 어떤게 문젠지를 잘 모르겠네요...
답변 5