javascript - dataTables 新行不会添加到表中

Question

当我添加新数据时，它不会添加到表中

代码

HTML

<thead>
        <tr>
            <th class="text-center">ID</th>
            <th class="text-center">Number</th>
            <th class="text-center">Body</th>
            <th class="text-center">Heading</th>
            <th class="text-center">Book</th>
            <th class="text-center">Chapter</th>
            <th class="text-center">Actions</th>
        </tr>
    </thead>
    <tbody>
        <template v-for="verse in getVerses">
            <tr v-bind:key="verse.id">
                <td width="30" class="text-center">{{ verse.id }}</td>
                <td class="text-center">{{ verse.number }}</td>
                <td>{{ verse.body }}</td>
                <td>{{ verse.heading }}</td>
                <td class="text-center">{{ verse.book.name }}</td>
                <td class="text-center">{{ verse.chapter.name }}</td>
                <td class="text-center">
                    <button class="btn btn-sm btn-danger" type="button" @click="deleteVerse(verse.id)">Delete</button>
                </td>
            </tr>
        </template>
    </tbody>
</table>

Script

export default {
    name: "adminVerses",
    data() {
        return {
            isLoading: true,
            type: '',
            books: [],
            errors: [],
            pageTitle: 'Manage Verses',
            getChapters: [],
            getVerses: [],
            isLoadingChapters: true,
            isLoadingVerses: true,
            verse: {
                number: 1,
                heading: '',
                body: '',
                book_id: '',
                chapter_id: '',
            }
        }
    },
    methods: {
        submit: function(e) {
            axios.post('/api/saveVerse', this.verse)
            .then(res => {
                this.isLoading = false;
                $('#exampleModal').modal('toggle');
                this.getVerses.push( res.data.verse );
                this.verse = {
                    number: parseInt(this.verse.number) + 1,
                    heading: '',
                    body: '',
                    book_id: this.verse.book_id,
                    chapter_id: this.verse.chapter_id,
                };
            })
            .catch(error => {
                // handle authentication and validation errors here
                this.errors = error.response.data.errors
                this.isLoading = false
            })
        },
    }
}

任何想法？

更新

通过添加

if ($.fn.dataTable.isDataTable('#verses')) {
  $('#verses').DataTable().clear().destroy(); //This will destroy datatable               
};

this.getVerses.push( res.data.verse );

现在我可以将新添加的数据放入我的表中，但我也将失去分页和搜索等功能。

想法？

标签： javascriptvue.jsvuejs2datatables

Answer 1

打开您的 vue devtools 并检查 getVerses 是否获得正确的数据