Skip to content
Advertisement

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

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)
}
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement