버튼을 눌러도 data의 값이 변경되지 않습니다
274
1 câu hỏi đã được viết
안녕하세요! 제 코드로는 버튼을 눌러도 root 컴포넌트의 data 값이 변하지 않길래 캡틴판교님이 올려주신 ground-complete 코드를 복사해서 랜더링해봤는데요. 버튼을 눌러도 여전히 data 값이 그대로고, 이벤트는 어째서인지 보이지도 않네요ㅜㅜ
혹시 해결 방법이 있나 궁금합니다.
Câu trả lời 2
0
안녕하세요, 코드 첨부해 주시겠어요?
0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<app-header v-bind:propsdata="num"></app-header>
<app-content v-on:pass="deliverNum"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template: '<div>header</div>',
props: ['propsdata']
}
var appContent = {
template: '<div>content<button v-on:click="passNum">pass</button></div>',
methods: {
passNum: function() {
this.$emit('pass', 10);
}
}
}
new Vue({
el: '#app',
components: {
'app-header': appHeader,
'app-content': appContent
},
data: {
num: 0
},
methods: {
deliverNum: function(value) {
this.num = value;
}
}
})
</script>
</body>
</html>0
안녕하세요 해빈님, 코드 상에는 문제가 없는 것 같아요. 본문에 첨부해 주신 그림 보시면 Root 컴포넌트의 데이터가 정상적으로 10으로 바뀌어 있습니다.
다만 앱 헤더에서 프롭스로 받아서 템플릿에 표시는 안하고 계시는데 이건 의도하신건가요?
0
안녕하세요, 인프런 AI 인턴입니다.
해빈님, 문제 상황에 대해 정확한 해결책을 드리기 위해서는 코드 전체를 보는 것이 중요합니다만, 제공하신 정보를 바탕으로 몇 가지 확인해볼 점을 안내드리겠습니다.
- 버튼에 연결된 메서드가 올바르게 정의되어 있는지 확인해 주세요. 메서드 내에서
this.num의 값을 변경하는 로직이 있는지 살펴보시기 바랍니다.
- 메서드가 정의된 위치가 올바른지, 즉 해당 데이터를 참조하는 컴포넌트 내에 있는 메서드인지 확인해 주세요.
- Vue DevTools의 ‘Component events’ 탭에서 해당 이벤트가 발생했는지 확인해 보세요.
- 만약 이벤트가 발생하지 않는다면, 이벤트 핸들러가 버튼에 제대로 연결되어 있는지 (예:
@click="methodName") 확인해 보세요.
- 콘솔 탭에서 스크립트 오류가 발생했는지도 확인해 보세요. 오류 메시지가 있다면 오류의 원인을 파악하는 데 도움이 됩니다.
위의 점들을 차근차근 확인해 보시고 그래도 문제가 해결되지 않는다면, 소스 코드를 공유하거나 직접적인 커뮤니케이션을 통해 더 자세한 상담을 받아보시는 것을 추천드립니다.
개발자 툴에서 Vue가 표시되지 않는 현상.
0
90
2
chrome 확장 devtools 버전 문제
0
80
1
Vue.js not detected가 자꾸 뜹니다
0
78
2
마지막 강의가 안되요
0
54
1
data, computed, watch > Reactivity
0
48
1
f12누르고 개발자도구에 vue 탭이 안생겨요
0
87
1
vue composition api
0
72
1
강의 자료 다운이 될까요?
0
127
1
개발자 도구에서 뷰탭이 안보여요....
0
578
3
프롭스 데이터 질문입니다.
0
111
1
component.html:11 Uncaught ReferenceError: Vue is not defined at component.html:11:20 (anonymous) @ component.html:11
0
139
1
화면이 안떠요,, 이전 이후 강의는 뜨는데..
0
235
6
크롬 확장 프로그램 vue devtools 설치했는데
0
524
2
코드를 수정하고 브라우저의 Vue로 넘어가면 다운이 됩니다.
0
239
1
버튼을 클릭해도 event가 발생하지 않습니다.
0
309
1
vue3 css 경로 표시 문의
1
229
2
개발자도구 vue탭
0
354
1
화면 코드 보기
1
223
2
App.vue 내용 변경했는데 창이 연결할수없대요ㅜㅜ
1
380
2
html/css/js로 작성된 코드를 vue.js로 일부 전환하고자 이 강의를 듣기 시작했습니다.
1
881
2
Vue 개발자 도구에서 다른 기능들이 안보여요!
1
594
2
{{ num }} 이 <app-content> 아래에 들어가 있을때에는 노출이 안됩니다...
1
284
2
뷰 개발자도구 이벤트 타임라인 어느 부분에서 확인가능한건가요
1
398
2
다음 단계 강의는...?
1
383
2