Question

要创建表格，我正在使用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内部分配的QueryService与orders内部分配的data ()不同，但是我仍然不知道如何访问orders中的data ()。我尝试了this.$data.orders，但它也不起作用。有人有主意吗？

Answer 1

以响应方式更新索引处数组的正确方法是vm.$set(arr, index, value)，请参见Vue文档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语法。

Answer 2

解决方案是正确使用this，因为该函数具有作用域。只需在函数之前定义另一个变量，即可访问data()属性。

pollData: function () {

    var vm = this;

    setInterval(function() {
        ContractQueryService.orders().then(response => vm.orders = response.data)
    }, 5000)
}

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

2 个答案: