Question

我正在尝试在vue.js中使用mdbootstrap实现数据表。我想在事件和初始化时更新表数据，但是它不起作用。

模板;

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

    </div>

脚本;

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

它始终显示默认值，我从控制台检查数据行，该值似乎已更新，但数据表上没有更改。

任何帮助将不胜感激。

Answer 1

我们为您的问题找到了解决方案。新的代码位于：https://mdbootstrap.com/docs/vue/tables/datatables/#external-api

还要确保数据是可响应的，有必要将以下代码添加到我们程序包中的Datatable组件中：

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

它将在下一个MDB Vue版本中修复。

Answer 2

我安装了mdbvue 5.5.0，其中包括mikolaj描述的更改。这导致表列在更改时进行更新，但是为了使行也进行更新，我不得不在Datatable.vue中将watch方法添加如下：

function showCommments(){
    console.log(`Hello there`);
}

anime.add({
    targets: `enter code here`,
    showComments: showComments(),
})

MDB数据表未在Vue.js中呈现数据

2 个答案: