【Vue.js】Vueコンポーネントの中ではdataは関数である必要がある。

Vue.jsのコンポーネントについて復習しています。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>

<div id="app">
 <my-component></my-component>
</div>

Vue.component('my-component', {
  data: {
   number: 12
  },
  template: '<p>いいね({{number}})</p>'
})

new Vue({
 el: "#app",
})

これだとtemplateの中に記述されているnumberの12が表示されていない。

本当は、()のなかに12と表示させたい。

コンポーネントの中ではdataは関数にする必要がある。

コンポーネントの中ではdataは関数にする必要があります。
だから、記述を少しだけ変更します。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>

<div id="app">
 <my-component></my-component>
</div>

Vue.component('my-component', {
    data: function(){
    return {
     number: 12
    }
  },
  template: '<p>いいね({{number}})</p>'
})

new Vue({
    el: "#app",
})

dataを関数にして、returnで返したいオブジェクトを記述します。
ここでは以下のように記述を変更しました。

    data: function(){
    return {
     number: 12
    }

これで()の中に12という文字が表示されるようになりました。