To create a table I am using vuetify
data-table
. The data is coming from an express
server which is requested via axios
and then gives me a response that is structured as follows:
[ { datetime: 123456789, order: "abc100", status: "ok" }, { datetime: 123456789, order: "abc200", status: "ok" }, ... ]
This response is being used by the vue front as follows:
<v-data-table :headers="headers" :items="orders" > <template slot="items" slot-scope="props"> <td >{{ props.item.order }}</td> <td class="text-xs-right">{{ props.item.datetime }}</td> <td >{{ props.item.status }}</td> </template> </v-data-table> data () { return { headers: [ { ... }, { ... }, ... ], orders: [] } }, created () { QueryService.orders().then(response => this.orders = response.data) }
I know that I can change the state via this.orders
now without reloading the whole site, but how can I access the individual rows? They are in the array, so how can I add a new one or change an already existing one if I have 1000 orders? its hard to guess them via an index.
EDIT:
I can’t update the data-table via this.orders = response.data
and I don’t know why. The code itself works and I can test via console.log, that this.data
is being changed, but the data-table is not being updated!
created () { setInterval(function() { QueryService.orders().then(response => this.orders = response.data) }, 15000) }
EDIT 2:
I figured out that this.orders
which is assigned inside QueryService
is not the same orders
as the one inside data ()
, but I still don’t know how to access orders
inside data ()
. I tried this.$data.orders
, but it doesn’t work either. Anybody has an idea?
Advertisement
Answer
The solution was to use this
the right way, because of the scope inside the function. Just define another variable before the function and you can access data()
properties.
pollData: function () { var vm = this; setInterval(function() { ContractQueryService.orders().then(response => vm.orders = response.data) }, 5000) }