VueJS MDB-datatable не отображает данные из вызова API - PullRequest
Новая
       14

VueJS MDB-datatable не отображает данные из вызова API

2 голосов
/ 28 мая 2019

Я использую vueJs MDB-datatable для отображения моих данных, поступающих из моего API. Я следовал документации, основанной на MDB, при обработке «структуры OtherJSON», но она не переопределяла данные из запроса API.

Я пробовал другой обратный вызов до создания, создания, перед монтированием и монтирования, данные были изменены, но, тем не менее, последние данные не отображались.

Вот код: 

<template>
  <mdb-datatable
    :data="tableData"
    striped
    bordered
  />
</template>

<script>
import 'mdbvue/build/css/mdb.css';
import { mdbDatatable } from 'mdbvue';

export default {
  components: {
    mdbDatatable
  },
  data: () => ({
    tableData: {
      columns: [],
      rows: []
    }
  }),
  created() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(json => {
        let keys = ["id", "name", "username"];
        let entries = this.filterData(json, keys);

        //columns
        this.tableData.columns = keys.map(key => {
          return {
            label: key.toUpperCase(),
            field: key,
            sort: 'asc'
          };
        });

        console.log(this.tableData.columns);
        //rows
        entries.map(entry => this.tableData.rows.push(entry));
        console.log(this.tableData.rows);
      })
      .catch(err => console.log(err))
  },
  methods: {
    filterData(dataArr, keys) {
      let data = dataArr.map(entry => {
        let filteredEntry = {};
        keys.forEach(key => {
          if(key in entry) {
            filteredEntry[key] = entry[key];
          }
        })
        return filteredEntry;
      })
      return data;
    }
}
</script>

Документация, связанная с данными MDB, кажется простой, но я не знаю, какую часть мне не хватает.

Я новичок в VueJS. Любая помощь очень ценится.

1 Ответ

0 голосов
/ 18 июля 2019

Кажется, что текущая версия MDB Vue (5.5.0) берет ссылку на массивы rows и columns и реагирует, когда эти массивы мутируют, а не реагируют на изменения свойства, связанного с data сама опора.

Я вижу, что вы уже мутируете, а не заменяете массив rows, поэтому вам нужно сделать то же самое с массивом columns. 

    //columns
    this.tableData.columns.push(...keys.map(key => {
      return {
        label: key.toUpperCase(),
        field: key,
        sort: 'asc'
      };
    }));
...