Одного vue будет недостаточно - помимо отображения данных на клиенте, надо ещё следить за изменением файлов на сервере. Можно попробовать посмотреть в сторону node.js + websocket.
Набросок решения, сервер (используется
ws):
const fs = require('fs');
let ID = 0;
const clients = {};
new (require('ws').Server)({
port: 8081,
}).on('connection', ws => {
const id = ++ID;
clients[id] = ws;
ws.on('close', () => {
delete clients[id];
});
});
fs.watch('./', (eventType, filename) => {
if (/\.json$/.test(filename)) {
fs.readFile(filename, 'utf8', (err, data) => {
if (!err && data) {
const info = JSON.stringify({
filename,
data: JSON.parse(data),
});
Object.values(clients).forEach(n => n.send(info));
}
});
}
});
Клиент:
<div id="app">
<div v-for="(data, name) in files">
<div>{{ name }}</div>
<div>{{ data }}</div>
</div>
</div>
new Vue({
el: '#app',
data: {
socket: null,
files: {},
},
created() {
this.socket = new WebSocket('ws://localhost:8081');
this.socket.onmessage = e => {
const f = JSON.parse(e.data);
this.$set(this.files, f.filename, f.data);
};
},
});
