Vue JS не может отобразить в DOM возвращенные данные метода

Question

Шаблон HTML

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

метод

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;
            }
        });
    }
}

Я пытаюсь отобразить возвращенные данные в DOM, но ничего не отображается. Но когда я пытаюсь утешить журнал, данные отображаются. Как я могу быть в состоянии отобразить это. Что мне не хватает?

Answer 1

Проблема в том, что ваш getFantasyScore Метод ничего не возвращает, и даже в этом случае данные асинхронны и не реагируют.

Я бы создал компонент, который загружает данные при создании. Что-то вроде

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
      })
  }
})

а затем в вашем шаблоне

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

Answer 2

Вы не должны использовать методы для результатов AJAX, потому что они асинхронные. Вы можете получить полный teamRoster объект, а затем добавить это к вашему div:

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