[Vue warn]: Ошибка в nextTick: «Ошибка типа: this.method не является функцией» - ошибка отображается только на моей консоли, но работает как ожидается в браузере - PullRequest
Новая
       23

[Vue warn]: Ошибка в nextTick: «Ошибка типа: this.method не является функцией» - ошибка отображается только на моей консоли, но работает как ожидается в браузере

0 голосов
/ 18 октября 2019

Я не могу сказать, что я делаю неправильно, потому что в моем браузере все работает так, как ожидалось. Проблема у меня заключается в том, что всякий раз, когда я получаю доступ к этому компоненту во второй раз и создаю, обновляю или удаляю, он выдает мне эту ошибку. Но без использования router-link для доступа к компоненту на моей консоли нет ошибок. Как я могу решить это?

В моем app.js у меня есть эта функция, которая должна инициализировать таблицу 

const Pag = function(){
    let a = $('#datatable-buttons').DataTable({

        lengthChange: !1,
        buttons: ["copy", "print", "pdf"],
        language: {
            paginate: {
                previous: "<i class='mdi mdi-chevron-left'>",
                next: "<i class='mdi mdi-chevron-right'>"
            }
        },
        order: [],
        columnDefs: [ {
            'targets': [0], /* column index [0,1,2,3]*/
            'orderable': false, /* true or false */
        }],
        drawCallback: function() {
            $(".dataTables_paginate > .pagination").addClass("pagination-rounded")
        }
    });
     a.buttons().container().appendTo("#datatable-buttons_wrapper .col-md-6:eq(0)"), $("#alternative-page-datatable").DataTable({
        pagingType: "full_numbers",
        drawCallback: function() {
            $(".dataTables_paginate > .pagination").addClass("pagination-rounded")
        }
    })

}

window.Pag = Pag;

К вашему сведению, ошибка относится к this.initTable ()в методе loadEs ()

Screenshot of error

<script>
import JobRoute from "../nav/JobRoute";

export default {
    name: 'EmploymentStatus',

    components:{
        JobRoute, 
    },


    //every component must return something
    data(){
        return {
            editMode: false,
            eStatus:{},
            esForm: new Form({
                'estatus_id': '',
                'name': '',
                'comment': '',
            }),

        }
    },
    methods: {
        createEstatus: function(){
            this.$Progress.start();
                this.esForm.post('/api/employmentstatus')
                    .then(response => {
                        Fire.$emit('esCreated');
                        $('#esModal').modal('hide');
                        Toast.fire({
                            type: 'success',
                            title: 'Employment status create Successful'
                        });

                    })
                    .catch(errors => {
                        //this.errors = errors.response.data.errors;
                    });
            this.$Progress.finish();
        },

        initTable: function(){
            return new Pag() //initialize table
        },

        loadEs(){
            axios.get('/api/employmentstatus')
                .then ( response => {
                    this.eStatus = response.data.data; 
                }).then( ()=>{
                    this.$nextTick(function() { this.initTable() })
                })
                .catch(function (error) { 
                    console.log(error);
                })
        },

    },

    mounted() {

        this.loadEs();
        Fire.$on('esCreated', () => {
            $('#datatable-buttons').DataTable().destroy();
            this.loadEs();
        }) 

    },
    beforeDestroy() {
        this.initTable = null;
        delete this.initTable()

    }

}
</script>

1 Ответ

0 голосов
/ 18 октября 2019

это просто случай, когда this внутри функции связанного обещания отличается от this в вашем компоненте? Вы можете попробовать: 

    loadEs(){
        let self = this; //<---added
        axios.get('/api/employmentstatus')
            .then ( response => {
                this.eStatus = response.data.data; 
            }).then( ()=>{
                this.$nextTick(function() { self.initTable() }) //<--changed
            })
            .catch(function (error) { 
                console.log(error);
            })
    },
...