添加或编辑后如何从 VueJS 重新加载数据表？

Question

我想知道在通过 api 从数据库加载数据时如何使用相同的方法。在第一次数据表加载正常。但是，当我添加新记录时，我需要使用新记录再次加载我的数据表。这是我的html代码：

<table class="table table-striped table-bordered table-hover" id="dataTables-eventos">
    <thead>
        <tr class="tbheader">
            <th class="text-center">#</th>
            <th>Nome do Evento</th>
            <th class="text-center">Editar</th>
            <th class="text-center">Deletar</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="ev in eventos" :key="ev.id" track-by="id">
            <td class="text-center">{{ ev.id }}</td>
            <td>{{ ev.name }}</td>
            <td class="text-center"><a class="cursorpointer" v-on:click="showMessage()"><span class="glyphicon glyphicon-edit"></span></a></td>
            <td class="text-center"><span class="glyphicon glyphicon-trash"></span></td>
        </tr>
    </tbody>
</table>

这是我的 VueJS 代码：

mounted() {
  this.getEventos();
},

methods: {
    getEventos() {
        axios.get('/api/eventos')
             .then((response) => {
                this.eventos = response.data})
             .then((response) => {
                $('#dataTables-eventos').DataTable({
                    responsive: true,
                    "aaSorting": [[ 1, "asc" ]],
                    "aoColumnDefs": [
                        { "bSortable" : false, "aTargets": [0,2,3] },
                        { "searchable": false, "aTargets": [2,3] }
                    ],
                    language: {
                        url: '/js/dataTables/localization/pt_BR.json'
                    }
                });
             });
},

addNewRecord() {

    axios.post('/api/eventos', { nomeEvento: this.nomeEvento });

}

那么，在我的数据库中添加（或编辑）新记录后，如何重新加载我的数据表以便查看更改？

Answer 1

我刚遇到需要将 vue.js 与 datatables.net 一起使用并且必须使用自定义表格 html 的情况。我创建了一个组件，允许我根据需要使用 template/v-for 格式化表格，并在保留 datatables.net 功能的同时刷新数据表。我希望这对未来的人有所帮助......

export default {
    data() {
        return {
            dataTable: null
        }
    },
    props: {
        data: Array
    },
    watch: {
        data() {
            if (this.dataTable) {
                this.dataTable.destroy();
            }

            this.$nextTick(() => {
                this.dataTable = $("#table").DataTable({
                    language: {
                        emptyTable: "No Results Found"
                    }
                });
            });
        }
    }
}

Answer 2

您可以在不重新加载所有数据的情况下执行此操作。 发布到服务器后，只需将 this.nomeEvento 添加到数组 eventos 即可。