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("")
                .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?

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?

• javascript
• vue.js
• vuejs2

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

2 Answers 2

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

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.