Question

我想知道在通过api从数据库加载数据时如何使用相同的方法。在第一次dataTables加载正常。但是，当我添加新记录时，我需要使用新记录再次加载我的dataTables。这是我的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 });

}

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

Answer 1

您无需重新加载所有数据即可完成此操作。发布到服务器后，只需将 this.nomeEvento 添加到数组 eventos 。

如何在添加或编辑后从VueJS重新加载dataTable？

1 个答案: