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 回答