jquery - [Vue 警告]：nextTick 中的错误：“TypeError：this.method 不是函数” - 错误仅在我的控制台上显示，但在浏览器上按预期工作

问题描述

我不知道我做错了什么，因为一切似乎都在我的浏览器上按预期工作。我遇到的问题是，每当我第二次访问这个组件并创建、更新或删除时，它都会给我这个错误。但是不使用 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;

仅供参考，错误是指 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>

标签： jquerylaravelvue.jsvuejs2vue-router

jquery - [Vue 警告]：nextTick 中的错误：“TypeError：this.method 不是函数” - 错误仅在我的控制台上显示，但在浏览器上按预期工作

问题描述

解决方案

推荐阅读