Mdb datatable не отображает данные в Vue.js - PullRequest
Новая
       18

Mdb datatable не отображает данные в Vue.js

0 голосов
/ 14 марта 2019

Я пытаюсь реализовать datatable с помощью mdbootstrap в vue.js. Я хотел бы обновить данные таблицы о событиях и при инициализации, но это не работает.

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();
    },

Он всегда показывает значения по умолчанию, я проверяю строки данных из консоли, кажется, что значение обновлено, но нет изменений в таблице данных.

Любая помощь будет оценена.

Ответы [ 2 ]

0 голосов
/ 17 июня 2019

Я установил mdbvue 5.5.0, который включает изменения, которые описал mikolaj.Это привело к тому, что столбцы таблицы обновлялись при изменении, но для того, чтобы строки тоже обновлялись, мне пришлось добавить метод watch в Datatable.vue следующим образом: 

watch: {
data(newVal) {
  this.columns = newVal.columns;
  this.rows = newVal.rows;
},
0 голосов
/ 29 мая 2019

Мы нашли решение для вашей проблемы. Новый код доступен здесь: https://mdbootstrap.com/docs/vue/tables/datatables/#external-api

Также, чтобы убедиться, что данные реагируют, необходимо добавить следующий код в компонент Datatable в нашем пакете: 

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

Это будет исправлено в следующей версии MDB Vue.

...