vue.js: change the values of a table in a reactive way

Question

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?

Answer 1

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)
}