버튼을 눌러도 data의 값이 변경되지 않습니다

Vue.js 시작하기 - Age of Vue.js

같은 컴포넌트 레벨 간의 통신 방법 구현 2

작성

240

인프런1.png 인프런2.png

안녕하세요! 제 코드로는 버튼을 눌러도 root 컴포넌트의 data 값이 변하지 않길래 캡틴판교님이 올려주신 ground-complete 코드를 복사해서 랜더링해봤는데요. 버튼을 눌러도 여전히 data 값이 그대로고, 이벤트는 어째서인지 보이지도 않네요ㅜㅜ

혹시 해결 방법이 있나 궁금합니다.

javascript vue.js

답변 2

장기효(캡틴판교)

지식공유자

안녕하세요, 코드 첨부해 주시겠어요?

해빈

질문자

<!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>

해빈

질문자

이 코드입니다!

장기효(캡틴판교)

지식공유자

안녕하세요 해빈님, 코드 상에는 문제가 없는 것 같아요. 본문에 첨부해 주신 그림 보시면 Root 컴포넌트의 데이터가 정상적으로 10으로 바뀌어 있습니다.

다만 앱 헤더에서 프롭스로 받아서 템플릿에 표시는 안하고 계시는데 이건 의도하신건가요?

해빈

질문자

앗 그렇군요 감사합니다!

아니요 프롭스가 안 보여서 질문 드린 것도 있어요ㅜㅜ 과정이 안 보이니 답답하더라구요

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.
해빈님, 문제 상황에 대해 정확한 해결책을 드리기 위해서는 코드 전체를 보는 것이 중요합니다만, 제공하신 정보를 바탕으로 몇 가지 확인해볼 점을 안내드리겠습니다.

버튼에 연결된 메서드가 올바르게 정의되어 있는지 확인해 주세요. 메서드 내에서 this.num의 값을 변경하는 로직이 있는지 살펴보시기 바랍니다.
메서드가 정의된 위치가 올바른지, 즉 해당 데이터를 참조하는 컴포넌트 내에 있는 메서드인지 확인해 주세요.
Vue DevTools의 ‘Component events’ 탭에서 해당 이벤트가 발생했는지 확인해 보세요.
만약 이벤트가 발생하지 않는다면, 이벤트 핸들러가 버튼에 제대로 연결되어 있는지 (예: @click="methodName") 확인해 보세요.
콘솔 탭에서 스크립트 오류가 발생했는지도 확인해 보세요. 오류 메시지가 있다면 오류의 원인을 파악하는 데 도움이 됩니다.

위의 점들을 차근차근 확인해 보시고 그래도 문제가 해결되지 않는다면, 소스 코드를 공유하거나 직접적인 커뮤니케이션을 통해 더 자세한 상담을 받아보시는 것을 추천드립니다.

인프런 커뮤니티 질문&답변

버튼을 눌러도 data의 값이 변경되지 않습니다