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?

tony19 · Accepted Answer · 2022-07-17 23:39:45Z

15

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.

edited Jul 17, 2022 at 23:39

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Nov 27, 2016 at 16:16

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JonnySerra Over a year ago

Oh wow that was it, what the heck, isn't that just defining the function? What exactly is the difference between doing it that way or using ES6 syntax? Thank you so much :)

Charles Wood Over a year ago

For those coming across this post several years later: there are several differences between function (which this syntax is short for), and arrow functions (() =>), but one of the most important differences is in how they treat the keyword "this".

Charles Wood Over a year ago

For more info on this shorthand way of defining functions when they're members of objects: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

Method not defined in mounted hook, Vue JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related