Vue JS unable to display to DOM the returned data of method

Question

Template html

<div class="item" v-for="n, index in teamRoster">
   <span> {{ getFantasyScore(n.personId) }} </span>
</div>

Method

getFantasyScore(playerId) {
    if(playerId) {
        axios.get(config.NBLAPI + config.API.PLAYERFANTASYSCORE + playerId)
        .then( (response) => {
            if( response.status == 200 ) {
                console.log(response.data.total)
                return response.data.total;
            }
        });
    }
}

I'm trying to display the returned data to DOM but it doesnt display anything. But when I try to console log the data is displays. How can I be able to display it. What am I missing?

How are you populating the teamRoster object / array? Might be easier to just pre-fetch the fantasy-score data at the same time — Phil
– Phil, Commented Aug 2, 2017 at 5:39

Phil · Accepted Answer · 2017-08-02 05:09:15Z

3

Problem is, your getFantasyScore method doesn't return anything and even then, the data is asynchronous and not reactive.

I would create a component that loads the data on creation. Something like

Vue.component('fantasy-score', {
  template: '<span>{{score}}</span>',
  props: ['playerId'],
  data () {
    return { score: null }
  },
  created () {
    axios.get(config.NBLAPI + config.API.PLAYERFANTASYSCORE + this.playerId)
      .then(response => {
        this.score = response.data.total
      })
  }
})

and then in your template

<div class="item" v-for="n, index in teamRoster">
  <fantasy-score :player-id="n.personId"></fantasy-score>
</div>

answered Aug 2, 2017 at 5:09

Phil

166k25 gold badges265 silver badges269 bronze badges

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

Comments

Julian · Accepted Answer · 2017-08-02 05:35:06Z

0

You shouldn't use methods for AJAX results because they are async. You could retrieve the full teamRoster object and then add this to your div:

<div class="item" v-for="fantasyScore in teamRoster" v-if="teamRoster">
   <span> {{ fantasyScore }} </span>
</div>

edited Aug 2, 2017 at 5:35

answered Aug 2, 2017 at 4:49

Julian

1,4771 gold badge13 silver badges34 bronze badges

4 Comments

Phil Over a year ago

Where is getFantasyScoreByPerson called and how is the id passed to it?

Julian Over a year ago

@Phil, fixed that!

Phil Over a year ago

Not really. Where does this.id come from? How does it get the id from n.personId in the repeater?

Julian Over a year ago

I simplified it. Didn't read the requirements carefully. Just as an alternative solution to yours, which is the preferred one, @Phil.

Collectives™ on Stack Overflow

Vue JS unable to display to DOM the returned data of method

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related