如何将变量从axios获取请求传递给vuejs中的子组件？

Question

我通过以下方式执行axios获取请求：

index() {
   axios.get('/list/items').then(response => {
       this.items = response.data.items;
       this.stats = response.data.stats;
}

如果我做console.log(this.stats)，则会看到正确的数据列为数组。

我想将此数据传递给子组件，例如：

<stats :stats-list="stats"></stats>
or

<stats v-bind:stats-list="stats"></stats>

在我的子组件中，我尝试获取以下数据：

props: ['statsList'],
mounted() {
    console.log(this.statsList);
}

我到这里不确定。

我该怎么做才能从父组件获取此数据？

Answer 1

尝试一下-

  

v-if

<stats :stats-list="stats" v-if="statsList"></stats>

让我知道它是否有效！

Answer 2

您应该将初始值传递给统计信息，或使用prop验证来设置默认值 也可以计算。

props: ['rawStatsList'],
computed: {
  statsList(){ return this.rawStatsList? this.rawStatsList : []; }
}

使用v-if将在axios完成之前隐藏块，但是请注意，如果axios有错误，它将不会显示