Новая строка 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 );

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

идеи?

Answer 1

откройте vue devtools и проверьте, получает ли getVerses правильные данные

Answer 2

Pu sh в массиве не отвечает, поэтому vue не знает, что ему нужно обновить представление. Установщик массива отзывчив, поэтому:

this.getVerses = this.getVerses.concat(res.data.verse)

сделает свое дело.

Answer 3

Вы используете это для ссылки на объект, поэтому вы ограничены областью действия Ax ios. Вместо этого вы можете использовать переменную для хранения ссылки на главный объект, в вашем случае adminVerses, а затем использовать $ data для установки или извлечения атрибутов данных.

Пример:

    let vm = this;
axios({
                ...
            }).then((res) => {

                vm.$data.getVerses.push( res.data.verse );
            });