Topic: Mdb datatable does not rendering data which comes from api in Vue.js

fa. free asked 5 years ago


I'm trying to implement a datatable with mdbootstrap in vue.js. I would like to update table data on events and when initialized but it does not work.

Template;

<div class="col-md-12">
    <mdb-datatable
            :data="data"
            striped
            bordered
    />
</div>

Script;

 import { mdbDatatable } from 'mdbvue';

export default {

name: 'userManagement',
components: {
    mdbDatatable
},
data() {
    return {
        className:"",
        classList: [],

        data: {
            columns: [
                {
                    label: 'Name',
                    field: 'className',
                    sort: 'asc'
                }, {
                    label: 'ID',
                    field: 'id',
                    sort: 'asc'
                }
            ],
            rows: [
                {
                    className: 'Tiger Nixon',
                    id:1
                },
                {
                    className: 'Garrett Winters',
                    id:2
                }
            ]
        }
    }
},
methods: {

    getClassList(){
        var _this = this;
        this.$axios.get('my_url/admin/classes').then(function (response) {
            if (response.status === 200) {

                _this.data.rows = [];
                response.data.forEach(function (obj) {
                    let item = {
                        className: obj.className,
                        id: obj.id
                    };
                    _this.data.rows.push(item);
                });
            }
        }).catch(function (err) {
            alert("" + err);
        });
    }
},
mounted(){
    this.getClassList();
},

It always shows default values, I check the data rows from console the value seems to be updated but no change on the datatable.

Any help would be appreciated.

Stackoverflow link


vitaliy sheverov free answered 5 years ago


Hi, code from here https://mdbootstrap.com/docs/vue/tables/datatables/#external-api by Other JSON structures doesnt work. How i can show not formatted ajax data?


Mikołaj Smoleński staff commented 5 years ago

Hi there, We're currently working on that issue. It's solved on our development branch and will be released on Monday.

Best regards


Mikołaj Smoleński staff answered 5 years ago


Hi there again,

We've found the solution for Your issue. The new code is available here: https://mdbootstrap.com/docs/vue/tables/datatables/#external-api

Also to make sure the data is reactive it's necessary to add the following code to the Datatable component in our package:

watch: {
    data(newVal) {
      this.columns = newVal.columns;
    },
    (...)
}

It will be fixed in the next Vue release.

Best regards


Mikołaj Smoleński staff answered 5 years ago


Hi there,

We're currently working on that issue. We'll try to fix it as soon as possible.

Best regards


Eee free answered 5 years ago


Thanks for the reply, Mikolaj!

Anyhow, I've already tried those examples on that documentation. I copied the code in "Other JSON structure" still it didn't work.

Here's my snippet of code:

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

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

export default {
   components: {
   mdbDatatable
 },
computed: {
  data() {
    return {
      columns: [],
      rows: []
    }
  },
},
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;
}
 },
mounted(){
 fetch('https://jsonplaceholder.typicode.com/users')
  .then(res => res.json())
  .then(json => {
     console.log(json);
    let keys = ["id", "name", "username"];
    let entries = this.filterData(json, keys);
    //columns
    this.data.columns = keys.map(key => {
      return {
        label: key.toUpperCase(),
        field: key,
        sort: 'asc'
      };
    });
    //rows
    entries.map(entry => this.data.rows.push(entry));
    })
    .catch(err => console.log(err));
   }
 }

.dataTables_wrapper { min-width: 80% !important; margin: 70px auto 0px !important; }


Mikołaj Smoleński staff answered 5 years ago


Hi there,

If You want to pass data from API, please use the following syntax:

<mdb-datatable :data="'https://my-json-server.typicode.com/Rotarepmi/exjson/db'" striped bordered  />

Also, in the next release we will udpate the datatable component, to control the data changes.

Best regards


Eee free commented 5 years ago

Does this mean that the "Other JSON structures" feature is not yet available?


Mikołaj Smoleński staff commented 5 years ago

On this page You can find all info about other data structures in datatables: https://mdbootstrap.com/docs/vue/tables/datatables/

Best regards


Eee free commented 5 years ago

Hi Mikolaj. I posted the code ( below on this comment ) based on the documentation you've sent in which it didn't work on my end. Any help would be appreciated. Thank you!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.1.1
  • Device: Macbook air
  • Browser: Chrome
  • OS: macOS High Sierra
  • Provided sample code: No
  • Provided link: Yes