VueJS - 在 V-Bind 中将数据推送到数组中

Question

我正在尝试从设备列表中检索数据，根据设备数量，它会将数据绘制在图表上。数据也会每隔一秒更新一次，换句话说，我想让图表在 "real-time"

中继续绘制数据

这是我当前的代码

index.html

<div v-for="data in devices">
    <line-chart :data="[[data.time, data.value]]"></line-chart>
</div>

脚本（Vue实例）

var displayDataArray = [];

var socket = io.connect();
  socket.on('stream', function (sensorData) {
    app.devices = sensorData.deviceList;
    ProcessData(app.devices);
  });

  function ProcessData(dataObject) {
    var sensorValue;
    for (sensorValue in dataObject) {
      var deviceValue = dataObject[sensorValue];
      displayDataArray.push([deviceValue.timestamp, parseInt(deviceValue.lux)]);
    }
  }

  var app = new Vue({
    el: "#app",
    data: {
      devices: {},
      chartData: displayDataArray
      },
    methods: {
      update() {
        console.log(this.devices);
      }
    }
  });

但是，数据总是在一个点上绘制。它没有附加到数组上。如果我在 <line-chart> 中绑定 :data="chartData"，它会使用第二个设备上的数据（如果有两个设备被传递到 devices 对象）以显示在两个图形上。

有没有好的方法实现这个功能？

仅供参考，这是对象 devices 的样子

devices's object 感谢您的帮助！

Answer 1

下面的内容是否符合您的要求：

var socket = io.connect();
socket.on('stream', function(sensorData) {
    app.devices = sensorData.deviceList;
});

var app = new Vue({
    el: "#app",
    data: {
        devices: {},
        chartData: {}
    },
    watch: {
        devices (newValue) {
            let chartData = this.chartData
            for(device in newValue) {
                let deviceValue = newValue[device]
                if(!chartData[device])
                    chartData[device] = []
                chartData[device].push([deviceValue.timestamp, parseInt(deviceValue.lux)])
            }
        }
    }
});

和v-for="device in chartData" ?

VueJS - 在 V-Bind 中将数据推送到数组中

VueJS - Push data into array in V-Bind

javascript

real-time-data

vue.js