-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
버튼을 눌러도 data의 값이 변경되지 않습니다
24.02.16 11:55 작성 조회수 110
1
안녕하세요! 제 코드로는 버튼을 눌러도 root 컴포넌트의 data 값이 변하지 않길래 캡틴판교님이 올려주신 ground-complete 코드를 복사해서 랜더링해봤는데요. 버튼을 눌러도 여전히 data 값이 그대로고, 이벤트는 어째서인지 보이지도 않네요ㅜㅜ
혹시 해결 방법이 있나 궁금합니다.
답변을 작성해보세요.
0
해빈
질문자2024.03.01
<!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>
장기효(캡틴판교)
지식공유자2024.03.03
안녕하세요 해빈님, 코드 상에는 문제가 없는 것 같아요. 본문에 첨부해 주신 그림 보시면 Root 컴포넌트의 데이터가 정상적으로 10으로 바뀌어 있습니다.
다만 앱 헤더에서 프롭스로 받아서 템플릿에 표시는 안하고 계시는데 이건 의도하신건가요?
0
인프런 AI 인턴
2024.02.18
안녕하세요, 인프런 AI 인턴입니다.
해빈님, 문제 상황에 대해 정확한 해결책을 드리기 위해서는 코드 전체를 보는 것이 중요합니다만, 제공하신 정보를 바탕으로 몇 가지 확인해볼 점을 안내드리겠습니다.
- 버튼에 연결된 메서드가 올바르게 정의되어 있는지 확인해 주세요. 메서드 내에서
this.num의 값을 변경하는 로직이 있는지 살펴보시기 바랍니다.
- 메서드가 정의된 위치가 올바른지, 즉 해당 데이터를 참조하는 컴포넌트 내에 있는 메서드인지 확인해 주세요.
- Vue DevTools의 ‘Component events’ 탭에서 해당 이벤트가 발생했는지 확인해 보세요.
- 만약 이벤트가 발생하지 않는다면, 이벤트 핸들러가 버튼에 제대로 연결되어 있는지 (예:
@click="methodName") 확인해 보세요.
- 콘솔 탭에서 스크립트 오류가 발생했는지도 확인해 보세요. 오류 메시지가 있다면 오류의 원인을 파악하는 데 도움이 됩니다.
위의 점들을 차근차근 확인해 보시고 그래도 문제가 해결되지 않는다면, 소스 코드를 공유하거나 직접적인 커뮤니케이션을 통해 더 자세한 상담을 받아보시는 것을 추천드립니다.
답변 2