In Vue, how do I set a data property from a method on load?

Question

I'd like to have a data prop populated by data received from an axios http request. Here's a simplified version of the issue.

I would like the 'hello' prop to populate when the app loads. And when the user clicks the button, the 'hello' prop should update. The click-and-update part is working as expected, but how do I get the data to populate the 'hello' prop initially? I've also tried it with computed properties, but that also doesn't populate the 'hello' prop on the initial load. Thanks!

<div id="app">
  <h1>{{ hello }}</h1>
  <button @click="updateText()">Update text!</button>
</div>

var app = new Vue({
  el:'#app',
  created() { 
    updateText() // Calling this here does not work
  },
  data: {
    hello: ''
  },
  methods: {
    updateText: function() {
      this.hello = 'hello'
    }
  }
});

Un1 · Accepted Answer · 2018-06-28 20:35:00Z

1

You don't have this. before the method name inside created so it's not calling the method:

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      hello: ''
    }
  },
  created () { 
    this.updateText()
  },
  methods: {
    updateText: function() {
      this.hello = 'hello'
    }
  }
})

edited Jun 28, 2018 at 20:35

answered Jun 28, 2018 at 20:29

Un1

4,15214 gold badges43 silver badges87 bronze badges

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

1 Comment

h.and.h Over a year ago

Duh, that did it. Thanks!

Collectives™ on Stack Overflow

In Vue, how do I set a data property from a method on load?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related