Vue JS路由器和動態更新路由內容

Question

我目前正在使用Vue路由器創建客戶端Vue JS應用程序。爲了給你一點歷史，該應用程序加載存儲在服務器上的json文件以顯示數據。定期更新這個文件，我想重新加載文件並更新視圖。

忽略數據文件的提取（此位很好），當我使用基本Vue示例設置新數據提取並更新數據時，它按預期工作。

但是，當我介紹Vue路由器時，可見更新的數據不會顯示。結果（甚至是路由器/ vue實例）做console.log會顯示新的數據更改，但HTML不會更新以反映更改。

我使用Vue 2（這是相當新的），所有文檔/示例指向使用節點（我不這樣做）更新頁面導航&上的數據。

我用我正在做的事情的基本過程嘲笑了一個簡單的JS bin。您可以在newData陣列中看到第一項更改的名稱和百分比。

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

任何幫助深表感謝。

Answer 1

這樣做的正確方法實際上是prop s。

這是在博客文章我的話題寫的所有詳細資料：

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

用一個例子就jsbin

被發現

Answer 2

您的代碼不在ListingCompo組件中，您正在初始化數據，但它不知道以後的更改。爲了稍後反映出變化，您需要將監視器放在父數據上，或者只需要一個計算屬性，只要您的父數據發生更改，該屬性就會更改。

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

工作jsbin。