How to use Vue.js methods to set data properties

Question

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.

lamboktulus1379 · Accepted Answer · 2020-10-04 09:34:57Z

1

You need to use data property.

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

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

And loop the values

answered Oct 4, 2020 at 9:34

lamboktulus1379

3701 gold badge4 silver badges13 bronze badges

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

4 Comments

jjarey Over a year ago

Thanks, this works and I can see from the console that the values array is updated accordingly. However, it seems that Vue cannot detect these changes to an array and the fetched values are not displayed on front-end (just showing the initial, empty array). Any ideas on this?

lamboktulus1379 Over a year ago

Are you sure you have assigned the fetched data to the values?

jjarey Over a year ago

Yes, I changed the logic as follows. ``` data() { return { values: [] } }, methods: { getData: function() { this.values = arr; console.log(this.values); // I can see the fetched data on console. } } ``` I think that the problem is that my app doesn't re-render the HTML document when the values array is updated. <p v-for="value in values">{{ value }}></p> This is just displaying the initial array, not the updated.

jjarey Over a year ago

It took a while to debug but the problem was in scope. this.values = arr; console.log(this.values); This worked OK in the scope of the function, but this wasn't referring to the array I was thinking of. Needed to add const self = this; on global level. It was hard to notice that but works OK now.l

Collectives™ on Stack Overflow

How to use Vue.js methods to set data properties

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related