TypeError: Cannot read property 'apply' of undefined

3시간 동안 삽질했다.

 

Vue의 이벤트 버스를 하나 생성해서

 

import Vue from 'vue';

export default new Vue();

 

이 중간 Vue 인스턴스로 이벤트를 발생시키고 부모 인스턴스에서 내가 원하는 데이터의 변경

 

<script>
import ToolBar from './components/ToolBar.vue'
import Spinner from './components/Spinner.vue'
import bus from './utils/bus.js'

export default {
  components: {
    ToolBar,
    Spinner,
  },
  data() {
    return {
      loadingStatus : false
    }
  },
  method: {
    startSpinner(){
      console.log("startSpinner");
      this.loadingStatus = true
    },
    endSpinner(){
      this.loadingStatus = false
    }
  },
  created(){
    bus.$on('startSpinner',this.startSpinner);
    bus.$on('endSpinner',this.endSpinner);
  },
  
}

</script>

 

spinner의 loadingStatus를 변경 시키기 위함이다. 

이벤트가 발생하는곳은 

<script>
import ListItem from '../components/ListItem.vue';
import bus from '../utils/bus.js';

export default {
  components: {
    ListItem,
  },
  created(){
    bus.$emit('startSpinner');
    setTimeout(() => {
      this.$store.dispatch('FETCH_NEWS')
        .then(() => {
          bus.$emit('startSpinner');
          console.log('fetched');
        })
    },3000);
  }
}
</script>

 

여기서 발생시키는데, 

 

 

But..

 

이런 에러가 발생됬다.... 뭐가 문제인지 몰라서 3시간동안 Vue의 코드를 까보면서 현자타임이 수백번 찾아왔었다..(봐도 모르겠어~~)

vue의 버젼이나 emit 사용 방법이 다른건가? package.json도 갈아엎어 보고 별 이상한 짓거리를 다했습니다.

 

근데 저 에러의 의미가 내가 이벤트를 등록시켰지만  그 이벤트를 등록한 곳에서 해당 method를 찾을 수 없다는 그런 의미인것을 인식하고, 부모 인스턴스를 잘 보면서 methods가 아니라 method 라고 내가 적어놓았다 ㅎㅎ..

vscode가 너무 맨날 친절하게 코드 고쳐주고 충고도 해주고 이래서 너무 안일했던 나를 다시한번 느끼며 반성합니다.

 

but 이걸 통해 다른 공부도 다시한번 하면서 다시 이해하는게 되서 쓰잘떼기 없는 시간은 아니었다고 생각한다.