0

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

忽略数据文件的获取（这一点很好），当我使用基本 Vue 示例设置新的数据获取并更新数据时，它按预期工作。

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

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

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

http://jsbin.com/jeseden/edit?js,输出

任何帮助深表感谢。

4

2 回答 2

0

这样做的正确方法实际上是使用props。

这在我写的关于该主题的博客文章中有详细说明：

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

在jsbin上找到了一个示例

于 2017-07-07T10:03:17.967 回答
0

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

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

工作jsbin。

于 2016-11-22T04:37:14.160 回答