Search code examples
javascriptvue.jsasynchronousv-for

Render a date that comes asynchronous for each item in v-for

I have an array of servers, which I display in the template using v-for. Using the vue-nats library, I subscribe each server to receive dynamic data.

methods: {
  subscribe(uuid) {
    this.$nats.subscribe('report.' + uuid, (msg) => {
      this.serversDetailedInfo = Object.assign({}, this.serversDetailedInfo, msg)
    })
  }
}

The data comes in and I put it in the object: serversDetailedInfo. In msg I get objects: 

Object { server_uuid: "OTgxYWZlNDctMWE4Zi", ram: {…}, hdd: {…}, tstamp: " " }

Object { server_uuid: "ZjhlNDY2MjQtYjRiZi", ram: {…}, hdd: {…}, tstamp: " " }

But when I display this data in the template, I get not a list of data for each server, but only data for one server - new data overwrites old data. How I can dispaly data in template for each server? Thank you inadvance.

Solution

  • it is maybe because object keys are the same. It will override the existing data.

    var data = {
a:"shashank",
b:"gupta",}

let c = Object.assign({},data,{a:"shashank1",
b:"gupta1"});
c
{a: "shashank1", b: "gupta1"}

    "c" has been overide. instead of a object , create an array of object then push the data when data is coming from new server