[Vue 에러] Component 에러 - "data" option should be a function that resturns a per-instance value in component definitions.

문제원인

Component의 data를 object로 생성해서 발생한 에러이다.

 

문제해결

Component의 data를 함수형으로 작성해준다.

 

예시

 

// 오류 구문

<script>
  Vue.component('name of component', {
    data : {
      number : 1,
      price : 100
    }, // data를 object로 작성해 오류가 발생했다.
    template : '<h1>Hello Vue</h1>';
</script>

 

// 아래와 같이 수정해야 한다.

<script>
  Vue.component('name of component', {
    data(){
      return {
        number : 1,
        price : 100
      }
    }, // data를 함수형으로 작성한다
    template : '<h1>Hello Vue</h1>';
</script>