方法未在挂载钩子中定义，Vue JS

Question

所以我正在使用 Laravel 5.3 并且我正在尝试创建一个数据表，我正在尝试创建一个从后端获取数据的方法，我正在尝试将其称为组件准备就绪。

我发现 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.fetchData is not defined 知道我做错了什么吗？ Mounted 挂钩是否无法访问我的方法？

Answer 1

mounted 的语法应如下所示：

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

Don't use arrow function for lifecycle hooks，箭头函数使用词法 this 由它们的上下文决定，vue 将无法为我们绑定它。

方法未在挂载钩子中定义，Vue JS

Method not defined in mounted hook, Vue JS

vue.js

laravel-5.3