vuejs v2.0コンポーネントにデータを渡す

Question

vue.jsとimを使ってLaravel 5.3にアプリケーションを構築し、vue.jsに移動してページを動的にしました。私はそうコンポーネントに私は次のエラーを取得するそうした後、それを超える変換したい単一のページに取り組んですべてのものを得た：

[Vue warn]: Error when rendering component <homepage> at C:\xampp\htdocs\....... 
TypeError: Cannot read property 'nxt_weekly' of undefined 

私はそうのようなビューにデータを渡すました：

const app = new Vue({ 
el: '#app', 

mounted: function() { 
    this.fetchEvents(); 
}, 

data: { 
    loading: true, 
    stats: [] 
}, 

methods: { 
    fetchEvents: function() { 
     this.$http.get('home/data').then(function (response) { 
      this.stats = response.body; 
      this.loading = false; 
     }, function (error) { 
      console.log(error); 
     }); 
    } 

}); 

私はそうのように私の見解では、それらすべてを呼び出してAPIからのJSONレスポンスを保持している統計で

[]は次のとおりです。

<span class="stat" v-text="'stats.nxt_today'"></span> 
.... 
.... 

これは動作しますが、私はエラーがAB記載されているコンポーネントの作成に切り替えるとき新しいコードは、

Vue.component('homepage', require('./components/Homepage.vue'),{ 

    mounted: function() { 
     this.fetchEvents(); 
    }, 

    data: function() { 
     return{ 
      loading: true, 
      stats: [] 
     } 
    }, 


    methods: { 
     fetchEvents: function() { 
      console.log('running here'); 
      this.$http.get('home/data').then(function (response) { 
       this.stats = response.body; 
       this.loading = false; 
      }, function (error) { 
       console.log(error); 
      }); 
     } 
    } 
}); 

私は間違っていますか？コンポーネントがアクセスしようとしているときに、私のstatsオブジェクトが空になったのはなぜですか？

Answer 1

あなたは以下に示すように、v-bindを使用してコンポーネントのプロパティとしてごstatsに合格する必要があります。

<homepage v-bind:stats="stats"></homepage> 

ルートテンプレートで行われる上記のニーズ。次のようにそして、あなたのhomepageコンポーネントでは、あなたがpropsで値を受け取ることができます。

Vue.component('homepage', { 
    props: ["stats"], 
    mounted: function() { 
     // ... 
    }, 
    // ... 
} 

を、このコンポーネントのテンプレート内では、通常stats.nxt_todayにアクセスすることができます。

ところで、あなたの統計は配列かオブジェクトですか？最初は空の配列として定義しましたが、オブジェクトとしてアクセスしています。

問題が解決しない場合は、vue-devtoolsを使用して、コンポーネント内で使用可能なすべてのオブジェクトを表示できます。