@Lkj

Как вывести информацию в таблицу в Vuetify из JSON запроса проекта Vue.js?

Делаю запрос на сервер с помощью axios в проекте vue.js. Получаю данные с сервера и пытаюсь их оформить в таблицу. Для начала пробую положить в одну колонку инфу о count, который равен 1 (для проверки). Таблица выводится пустая. Вставляю JSON локально в файл vue, то все работает. Вопрос в чем моя ошибка и как правильней сделать? Как положит инфу в разные ячейки, если портянка json будет длиннее, через сортировку js?

Получаю следующие данные:
{
"data": {
"status": 0,
"response": [
{
"id": "1",
"owner": "l",
"status": "NEW",
"cfg": {
"count": 1,
"accept": [
"false"
],
"amount": {
"currency": "R",
"min": 1,
"max": "10"
},
"sender": {
"bank": {
"Agt": {
"type": "Ot",
"value": "5555",
"name": [
"вязь"
],
"currency": "R",
"addr": {
"country": "RU"
}
},
"Acct": {
"type": "Ot",
"value": "331"
},
"AgtAcct": {
"type": "Ot",
"value": "301"
}
},
"client": {
"name": [
"Рог"
],
"Acct": {
"type": "Ot",
"value": "331"
}
}
},
"recipient": {
"bank": {
"Agt": {
"type": "Othr",
"value": "04",
"name": [
"вязь"
],
"currency": "R",
"addr": {
"country": "RU"
}
},
"Acct": {
"type": "Ot",
"value": "331"
},
"AgtAcct": {
"type": "Ot",
"value": "301"
}
},
"client": {
"name": [
"Cor"
],
"Acct": {
"type": "Ot",
"value": "331"
}
}
}
}


Форма vuetify таблицы:
<template>
       <div>

      <v-data-table
        :headers="headers"
        :items="arrayGetGroup"
        :items-per-page="5"
        sort-by="calories"
        class="elevation-1"
      >
       <template v-slot:top>
          <v-toolbar app color="primary" dark>
            <v-toolbar-title>Тест</v-toolbar-title>
            <v-divider
              class="mx-4"
              inset
              vertical
            ></v-divider>
            <v-spacer></v-spacer>
          </v-toolbar>
        </template>
      </v-data-table>

        </div>
    </template>


Скрипт следующий
<script>
import axios from 'axios'

  export default {

    data: () => ({
      value: [],
      arrayGetGroup:[],
      headers: [
        {
          text: 'Номер',
          align: 'left',
          value: 'number',
        },
        { text: 'Сюда', value: 'arrayGetGroup.data.response[0].count' },
        { text: 'ММ', value: '' },
        { text: 'Ак', value: '' },
      ],
    }),
       mounted() {
        axios.post(cURL,
      {
        request_type: configuration,
        request: GetGroup
      })
      .then(response => (this.arrayGetGroup = response))
      .catch(error => console.log(error))
  },

  }
</script>
  • Вопрос задан
  • 658 просмотров
Решения вопроса 1
@Lkj Автор вопроса
Решение будет следующим по данному вопросу

.then(response => (this.arrayGetGroup = response.data.response.))


И вот здесь поправить с
{ text: 'Сюда', value: 'arrayGetGroup.data.response[0].count' },

на
{ text: 'Сюда', value: 'count' },
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы