Method not defined in mounted hook, Vue JS

Question

So i'm using Laravel 5.3 and i'm trying to create a DataTable as such, i'm trying to create a method that fetches data from the Backend and i'm trying to call it as soon as the component is ready.

I've found that the ready() hook is now dead and replaced with mounted() and as such my template looks like this.

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

The Mounted method fires but says that this$1.fetchData is not defined any idea what i'm doing wrong? Does the Mounted hook not have access to my methods?

Answer 1

Syntax for mounted should be like following:

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

Don't use arrow function for lifecycle hooks, arrow functions use lexical this determined by their contexts and vue won't be able to bind it for us.