CODEWITHSUNDEEP
javascriptvue.js
jjarey
jjarey

Reputation: 11

How to use Vue.js methods to set data properties

I'm new to Vue.js and trying to display data that is requested from a server. I have created a new Vue app and defined a method:

methods: {
  getData: function() {
    // making a request, parsing the response and pushing it to the array.
    console.log(arr);
    return arr;
    }
  }

The method works OK and I can log the array to the console on a button click.

<button v-on:click="getData">Get me some data</button>

However, I'm not sure how to actually use this array in the app. I would like save it to a property and then display it for the user. At first, I was thinking that I could use computed properties like this:

computed: {
  values: function() {
    return this.getData;
  }
}

... and display it to the user with a for loop:

<p v-for="value in values">{{ value }}></p>

At least this solution did not produce the desired result. I've probably misunderstood some of Vue's logic here.

Upvotes: 1

Views: 1921

Answers (1)

lamboktulus1379
lamboktulus1379

Reputation: 370

You need to use data property.

data() {
   return {
       values: []
   }
},

methods: {
   getData: function() {
       this.values = arr;
   }
}

And loop the values

Upvotes: 1

Related Questions