VueJS Syntax: Running method on mount

Question

I would like to load some data with vue-resource when a page loads, then re-load that data if a refresh button is pressed.

To keep my code DRY I wanted to put this functionality in a method. This was my first attempt:

index.html:

<div id="app"></div>

app.js:

const Vue = window.Vue = require("vue");
require("vue-resource");
const App = require("./components/App.vue");

window.app = new Vue({
    el: "#app",
    render: h => h(App)
});

components/app.vue:

<template>
    <div>
        <h1>Test</h1>
        <p>{text}</p>
        <button @click="loadData">Reload</button>
    </div>
</template>
<script>
export default {
    // This fails
    mounted: this.loadData,
    methods: {
        loadData() {
            // This syntax may be wrong, too. But the function isn't
            // even running, so I haven't started to debug this yet
            this.$http.get("https://icanhazip.com")
                .then(xhr => this.text = xhr.body);
        }
    }
};
</script>

This throws an error on line 10 of components/app.vue:

    mounted: this.loadData,

Saying Uncaught TypeError: Cannot read property 'reloadData' of undefined

How can I get the mounted function to refer to any of the methods defined in methods?

BTW: vue-resource isn't really a thing anymore. medium.com/the-vue-point/retiring-vue-resource-871a82880af4 — sandrooco
– sandrooco, Commented Sep 26, 2017 at 13:37

tony19 · Accepted Answer · 2022-07-15 00:23:16Z

18

You should use mounted event in following way with correct method declaration.

export default {        
    mounted() {
      this.loadData();
    },
    methods: {
        loadData() {
            // This syntax may be wrong, too. But the function isn't
            // even running, so I haven't started to debug this yet
            this.$http.get("https://icanhazip.com")
                .then(xhr => this.text = xhr.body);
        }
    }
};

More details can be found here.
https://v2.vuejs.org/v2/api/#mounted

edited Jul 15, 2022 at 0:23

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Sep 26, 2017 at 13:20

Thusitha

3,5113 gold badges23 silver badges33 bronze badges

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

Comments

Kumar_14 · Accepted Answer · 2017-09-26 13:31:02Z

2

You need to use the v-on ( @ ) directive to listen to DOM events like click and run some function in methods in this way:

<button @click="loadData">Reload</button>

@Thusitha is correct for the mounted, you need to update it.

edited Sep 26, 2017 at 13:31

answered Sep 26, 2017 at 13:23

Kumar_14

5843 silver badges15 bronze badges

1 Comment

stevendesu Over a year ago

+1 because this pointed out a valid issue, but can't accept since it doesn't actually answer the original question.

Collectives™ on Stack Overflow

VueJS Syntax: Running method on mount

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related