vue.js: изменить значения таблицы реактивным способом - PullRequest
Новая
       14

vue.js: изменить значения таблицы реактивным способом

0 голосов
/ 19 февраля 2019

Для создания таблицы я использую 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, но это тоже не работает.У кого-нибудь есть идея?

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

Решением было использование this правильным способом из-за области действия внутри функции.Просто определите другую переменную перед функцией, и вы получите доступ к data() свойствам. 

pollData: function () {

    var vm = this;

    setInterval(function() {
        ContractQueryService.orders().then(response => vm.orders = response.data)
    }, 5000)
}
0 голосов
/ 19 февраля 2019

Правильный способ реактивного обновления массива по индексу - это vm.$set(arr, index, value) См. Этот документ Vue здесь .

Чтобы найти свой заказ, вы можете выполнить поискмассив заказов с 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.

...