Vue JSルータとルートコンテンツを動的に更新する

Question

現在、Vue Routerを使用してクライアント側のVue JSアプリケーションを作成しています。あなたに少しの歴史を与えるために、アプリケーションはサーバーに保存されたjsonファイルを読み込んでデータを表示します。このファイルは定期的に更新され、ファイルを再ロードしてビューを更新したい。

データファイルのフェッチを無視して（このビットは問題ありません）、新しいデータフェッチを設定し、基本Vueの例を使用してデータを更新すると、期待通りに機能します。

しかし、Vue Routerを導入すると、の表示のデータが表示されません。 console.logに結果（およびルーター/ vueインスタンス）を追加すると、新しいデータ変更が表示されますが、HTMLは変更を反映するように更新されません。

私はVue 2（これはかなり新しい）を使用しています。すべてのドキュメント/例は、Node（これは私がやっていない）を使ってページナビゲーションのデータを更新することを指しています&。

私は、単純なJSビンを私がやっていることの基本的なプロセスで嘲笑しました。 newData配列には、最初の項目の名前と割合が表示されます。

http://jsbin.com/jeseden/edit?js,output

すべてのヘルプははるかに高く評価されます。

Answer 1

正しい方法は実際にはpropです。

これは私が話題に書いたブログ記事内のすべての詳細です：jsbin

で発見された例では

https://www.liquidlight.co.uk/blog/article/building-a-vue-v2-js-app-using-vue-router/

Answer 2

コードはListingCompoコンポーネントのように機能していません。データを初期化していますが、それ以降の変更は認識されません。変更を後で反映させるには、ウォッチャーを親データに置くか、または単に計算されたプロパティーを持たせるか、親データが変更されるたびに変更する必要があります。

var ListingCompo = { 
    template: '#template', 
    data: function() { 
     return {    
     } 
    }, 
    computed: { 
     records(){ 
     return this.$parent.records 
    }  
    } 
}; 

作業jsbin。