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。