Question

我目前正在使用Vue Router创建一个客户端Vue JS应用程序。为了给你一些历史记录，应用程序加载存储在服务器上的json文件来显示数据。这个文件会定期更新，我想重新加载文件并更新视图。

忽略数据文件的提取（这个位没问题），当我设置一个新的数据提取并使用基础Vue示例更新数据时，它按预期工作。

但是，当我引入Vue Router时，可见更新的数据不会显示。对结果（甚至路由器/ vue实例）执行console.log会显示新数据更改，但HTML不会更新以反映更改。

我正在使用Vue 2（这是相当新的），并且所有文档/示例都指向更新页面导航和数据的数据。使用Node（我没有做）。

我用我正在做的基本过程嘲笑了一个简单的JS bin。您可以在newData数组中看到第一个项目的名称和百分比发生变化。

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

非常感谢任何帮助。

Answer 1

您的代码在ListingCompo组件中不起作用，您正在初始化数据，但它不知道以后的更改。要让更改稍后反映，您需要将观察者放在父数据上，或者只是拥有一个计算属性，只要您的父数据发生变化，该属性就会发生变化。

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

工作jsbin。

Answer 2

这样做的正确方法实际上是prop s。

我在关于这个主题的博客文章中详细介绍了这一点：

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

在jsbin

上找到了一个示例

Vue JS路由器＆amp;动态更新路线内容

2 个答案: