Can't pass data from model to method in Vue.js

Question

I have a graph with a simple dropdown list with years and I need to pass the year whenever it's modified by the user so the graph will show that year's data.

For example, when I try to access the parameters from this method all i get is undefined:

fetchBarChartData({ anio, sort }) {
      var self = this;
      console.log(anio);
      fetch("https://demo8358110.mockable.io/year/" + this.anio) // insert your api call here
        .then(function(response) {
          var r = response.json();
          return r;
        })
        .then(function(data) {
          self.values = data.values;
          self.valuesline = data.valuesline;
          self.loaded = true;
        });

https://demo8358110.mockable.io/year/undefined

EDIT: I've added an example https://codesandbox.io/s/vue-template-x4z7b

Your example is a bit unclear but remove those curly brackets in the function call which are converting it into an anonymous object with data member anio and it should work. — Jbluehdorn
– Jbluehdorn, Commented Aug 30, 2019 at 18:12

Onwuka Gideon · Accepted Answer · 2019-08-30 19:10:39Z

2

You need to pass in the changed year to your fetchBarChartData function:

 <select name="year" v-model="year" @change="fetchBarChartData(year)">

answered Aug 30, 2019 at 19:10

Onwuka Gideon

4113 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

Can't pass data from model to method in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related