Vue JS router и динамическое обновление содержимого маршрута

Question

В настоящее время я создаю клиентское приложение Vue JS с помощью Vue Router. Чтобы дать вам немного истории, приложение загружает json-файл, хранящийся на сервере, для отображения данных. Периодически этот файл обновляется, и я хочу повторно загрузить файл и обновить представление.

Игнорирование выборки файла данных (этот бит в порядке), когда я настроил новую выборку данных и обновил данные с использованием базового примера Vue, он работает так, как ожидалось.

Однако, когда я вводил Vue Router, отображаемые обновленные данные не отображаются. Выполнение console.log с результатами (и даже экземпляром router/vue) показывает новые изменения данных, но HTML не обновляется, чтобы отразить изменение.

Я использую Vue 2 (что довольно новое), и все документы/примеры указывают на обновление данных на странице навигации & с использованием узла (которого я не делаю).

Я издевался над простым бункером JS с основным процессом того, что я делаю. Вы можете видеть в массиве 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.