vue.js:以被动方式更改表的值

问题描述 投票:0回答:2

要创建一个表我正在使用vuetify data-table。数据来自express服务器,该服务器通过axios请求,然后给我一个响应,其结构如下:

[
    {
        datetime: 123456789,
        order: "abc100",
        status: "ok"
    },
    {
        datetime: 123456789,
        order: "abc200",
        status: "ok"
    },
    ...
]

vue前面正在使用此响应,如下所示:

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

我知道我现在可以通过this.orders更改状态而无需重新加载整个站点,但是如何访问各行?它们在数组中,如果我有1000个订单,如何添加新的或更改现有的?很难通过索引猜测它们。

编辑:

我无法通过this.orders = response.data更新数据表,我不知道为什么。代码本身工作,我可以通过console.log测试,this.data正在更改,但数据表没有更新!

created () {
    setInterval(function() { 
        QueryService.orders().then(response => this.orders = response.data)
    }, 15000)
}

编辑2:

我发现在this.orders内部分配的QueryServiceorders内部的data ()不一样,但我仍然不知道如何在orders内访问data ()。我试过this.$data.orders,但它也不起作用。有人有想法吗?

javascript vue.js datatable state vuetify.js
2个回答
0
投票

以反应方式更新索引处的数组的正确方法是vm.$set(arr, index, value)请参阅此Vue doc here

要查找订单,您可以使用Array.findIndex搜索订单数组。真的,1000件物品并不多,特别是当它们已经装入记忆中时。它不是最佳的,但应该非常快。如果您计划进行大量搜索,则可能需要单独维护索引,可能在Vuex存储中。

// searching for an order by its `order` property.
const targetIndex = this.orders.findIndex(entry => entry.order=orderId)
this.$set(this.orders, targetIndex, modifiedOrder)

编辑:更新了Vue2语法。


0
投票

解决方案是以正确的方式使用this,因为函数内部的范围。只需在函数前定义另一个变量,即可访问data()属性。

pollData: function () {

    var vm = this;

    setInterval(function() {
        ContractQueryService.orders().then(response => vm.orders = response.data)
    }, 5000)
}
© www.soinside.com 2019 - 2024. All rights reserved.