Javascript Vue JS无法向DOM显示方法的返回数据

模板html

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

---

我试图向DOM显示返回的数据，但它什么也不显示。但是，当我尝试控制台日志时，会显示数据。我怎样才能显示它。我缺少什么？

您不应该对AJAX结果使用方法，因为它们是异步的。您可以检索完整的

团队花名册

对象，然后将其添加到您的

div

：

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

{{fantasyScore}}

问题是，您的

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

Vue.component（'fantasy-score'{
模板：“{score}}”，
道具：['playerId']，
数据（）{
返回{score:null}
},
创建（）{
get（config.NBLAPI+config.API.PLAYERFANTASYSCORE+this.playerId）
。然后（响应=>{
this.score=response.data.total
})
}
})

然后在你的模板中

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

调用了

GetFantasyCorebyPerson

的位置，以及

id

是如何传递给它的？@Phil，修复了这个问题！不是真的。

这个.id

来自哪里？它是如何从中继器中的

n.personId

获取

id

的？我简化了它。没有仔细阅读要求。作为您的首选解决方案的替代方案，@Phil。您如何填充

团队花名册

对象/数组？同时预取fantasy分数数据可能更容易

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