在挂钩,Vue JS中未定义的方法

Question

所以我正在使用Laravel 5.3并且我正在尝试创建一个DataTable,我正在尝试创建一个从后端获取数据的方法,并且我试图在组件准备好后立即调用它.

我发现ready()挂钩现在已经死了并用mounted()替换,因此我的模板看起来像这样.

<template>
..Simple Bootstrap table...
</template>

<script>
    export default {
        data: () => {
            return {
                searchQuery: "",
                columns: ['ID', 'Name', 'Campaign', 'Method', 'Limit Per Connection', 'Limit Per Day', 'Active', 'Last Ran'],
                lastId: 0,
                rowsPerPage: 10,
                gridData: [
                    { id: 1, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"},
                    { id: 2, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"},
                    { id: 3, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"},
                    { id: 4, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"},
                    { id: 5, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"},
                    { id: 6, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"},
                    { id: 7, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"}
                ]
            }
        },
        methods: {
            /**
             * Fetch JSON data for crons from the Backend
             *
             * @param lastId - The last ID in the current data
             */
            fetchData: (lastId) => {
                Vue.http.get('/data').success((response) => {

                    console.log(response);

                }).error((response) => {

                    console.error(response);

                })
            },
        },
        mounted: () => {
            // When the Component is ready fetch the JSON from the Server Backend
            this.fetchData(0);
        },
    }
</script>

<style>...My Css...</style>

Mounted方法开火但是说this$1.fetchData is not defined任何想法我做错了什么？Mounted挂钩是否无法访问我的方法？

Answer 1

语法mounted应该如下:

mounted () {
    // When the Component is ready fetch the JSON from the Server Backend
    this.fetchData(0);
}  

不要将箭头函数用于生命周期钩子,箭头函数使用this由其上下文确定的词汇,vue将无法为我们绑定它.