[vue warn] Property or method "login" is not defined on the instance but referenced during render

문제상황

• LoginView.vue 에서 App.vue로 emit해주는 로그인 함수를 메서드로 작성하였고, 로그인 버튼을 클릭하면 로그인 함수가 실행되도록 했다.
• 로그인 주소로 들어와서 콘솔창을 켰는데 에러가 있다.

 [Vue warn]: Property or method "login" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <LoginView>
       <App> at src/App.vue
         <Root>

[Vue warn]: Invalid handler for event "click": got undefined

found in

---> <LoginView>
       <App> at src/App.vue
         <Root>

해결과정

• 코드 잘못쓴 것이 있는지 찬찬히 살펴 보았다

해결

• LoginView.vue 스크립트에서 methods라고 써야하는데 method라고 오타를 내서 login 함수를 인식하지 못한 것이었다. 오타를 수정하니까 해결되었다.

<!--LoginView.vue -->
<template>
  <div>
      <h1>Login</h1>
      <div>
          <label for="username">username: </label>
          <input v-model="loginData.username" id="username" type="text">
      </div>
      <div>
          <label for="password">password: </label>
          <input v-model="loginData.password" id="password" type="password">
      </div>
      <div>
          <button @click="login">Login</button>
      </div>
  </div>
</template>

<script>
export default {
    name: 'LoginView',
    data() {
        return {
            loginData: {
                username: null,
                password: null,
            }
        }
    },
    methods: {
        login() {
            this.$emit('submit-login-data', this.loginData)
        }
    }
}
</script>

<style>

</style>

<!--App.vue-->
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link :to="{ name: 'Login'}">Login</router-link> 
    </div>
    <router-view @submit-login-data="login"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    login(loginData) {
      console.log('login!', loginData)
    }
  }
}

</script>