[Vue warn]：Error in nextTick："TypeError: this.method is not a function“-错误仅在我的控制台上显示，但在浏览器上按预期工作。

Question

我不知道我做错了什么，因为在我的浏览器上一切似乎都像预期的那样工作。我遇到的问题是，每当我第二次访问这个组件并创建、更新或删除时，它都会给我这个错误。但是如果不使用路由器链接来访问组件，在我的控制台上就不会出现错误。我该如何解决这个问题呢？

在我的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;

仅供参考，错误是指loadEs()方法中的this.initTable()

​

​

<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>

Answer 1

先试试import Vue from 'vue'，然后试试Vue.nextTick(...)

Answer 2

这仅仅是链接的promise函数中的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);
            })
    },