root 컴포넌트에서 undefined로 받습니다.
705
작성한 질문수 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>답변 5
3
2달이 지났지만..
resultNum 에 value 가 암묵적으로 넘어오게 돼서 resultNum(value) 가 아니라 resultNum 만 적어주면 오류가 나지 않습니다..!
0
제가 확인이 늦었네요. 본문에 적어주신 형태대로 resultNum(value)을 선언하시게 되면 value가 템플릿 표현식에 있는 value 값으로 찾게 됩니다. 강의에서 안내한 대로 작성하시는 걸 추천드릴게요 :)
0
템플릿 표현식에 메서드를 연결하는 부분에서 많은 분들이 헷갈려 하시는 것 같네요. 강의에서 안내해 드린대로 메서드 이름을 연결하셔야 합니다. 그렇지 않고 템플릿 표현식에서 resultNum(value) 과 같은 형태로 선언하시게 되면 템플릿 표현식에서 정의된 value 값을 찾게 됩니다.
자세한 내용은 아래 문서 참고하세요.
https://vuejs.org/guide/essentials/event-handling.html#calling-methods-in-inline-handlers
해당 내용은 다음 후속 강의에서 추가로 설명해 두겠습니다 :)
0
안녕하세요. 해당 문제에 저도 같은 증상을 보이고 있습니다.
v-on:pass="resultNum(10)"
v-on:pass="resultNum"
이렇게 보내면 정상적으로 출력됩니다. 두번째 방법으로 보내면 $emit에서 여러개를 보내도 value1, vaule2 ... 여러개를 받을 수있네요. 감사합니다.
0
안녕하세요. vue 입문자입니다. 이쪽에 관심이 있어서 수강을 하고있어
같은 학생으로써 저도 궁금해서 글 등록해보았습니다.
<app-content v-on:pass="resultNum(10)"></app-content>맨 위쪽 태그부분에 value 인자 를 10 이라는 숫자로 바꾸니 오류는 없는거같은데,
이렇게 하면 공부하시는 부분에 관해 의도된 실습내용과 거리가 멀어진걸까요?..
자세한 내용은 저도 잘 모르겠네요..
0
안녕하세요 꾸릉님, 질문을 자세히 적어주셔서 감사합니다 :) 코드를 보면 뷰 인스턴스 컴포넌트(루트 컴포넌트)의 데이터 속성 num의 기본 값이 0이고 아래 app-content 컴포넌트에서 이벤트가 발생되면 num의 값이 0에서 10으로 변환되어야 할 것 같아요.
Property or method is not defined on the instance but referenced during render
위 에러 메시지는 템플릿 표현식에서 정의되지 않은 데이터 속성이나 메서드가 선언되어 있으면 표시됩니다. 첨부해 주신 코드 상으로는 크게 문제가 없어 보이는데 여전히 문제 현상이 발생하시나요? :)
1
현재에도 그 증상이 아직 있는 것 같습니다.
아래의 BeomJun Lee님께서 작성하신 문제해결법에 의하여 해결은 했습니다만 어떤게 문젠지를 잘 모르겠네요...
개발자 툴에서 Vue가 표시되지 않는 현상.
0
96
2
chrome 확장 devtools 버전 문제
0
83
1
Vue.js not detected가 자꾸 뜹니다
0
86
2
마지막 강의가 안되요
0
57
1
data, computed, watch > Reactivity
0
52
1
f12누르고 개발자도구에 vue 탭이 안생겨요
0
91
1
vue composition api
0
74
1
강의 자료 다운이 될까요?
0
129
1
개발자 도구에서 뷰탭이 안보여요....
0
597
3
프롭스 데이터 질문입니다.
0
113
1
component.html:11 Uncaught ReferenceError: Vue is not defined at component.html:11:20 (anonymous) @ component.html:11
0
142
1
화면이 안떠요,, 이전 이후 강의는 뜨는데..
0
237
6
크롬 확장 프로그램 vue devtools 설치했는데
0
539
2
코드를 수정하고 브라우저의 Vue로 넘어가면 다운이 됩니다.
0
244
1
버튼을 클릭해도 event가 발생하지 않습니다.
0
312
1
vue3 css 경로 표시 문의
1
231
2
개발자도구 vue탭
0
357
1
화면 코드 보기
1
226
2
App.vue 내용 변경했는데 창이 연결할수없대요ㅜㅜ
1
385
2
html/css/js로 작성된 코드를 vue.js로 일부 전환하고자 이 강의를 듣기 시작했습니다.
1
891
2
{{ num }} 이 <app-content> 아래에 들어가 있을때에는 노출이 안됩니다...
1
289
2
뷰 개발자도구 이벤트 타임라인 어느 부분에서 확인가능한건가요
1
401
2
다음 단계 강의는...?
1
387
2
버튼을 눌러도 data의 값이 변경되지 않습니다
1
277
2