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

Posted 2023-02-23

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

【英文标题】：How to pass variable from axios get request to sub-component in vuejs?

【发布时间】：2019-09-11 15:55:27

【问题描述】：

我通过以下方式获取 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);

我在这里未定义。

我应该怎么做才能从父组件中获取这些数据？

【问题讨论】：

当组件被挂载时你正在记录它 - 直到那时 axios 请求还没有完成！

【参考方案1】：

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

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

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

【参考方案2】：

试试这个 -

如果

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

让我知道它是否有效！

【讨论】：

它应该可以工作，你能给我访问一些东西吗，比如一些 repo 或代码 sn-p？

我在 axios 中创建了一个 var renderComponent = false，请求后我将它设置为 true 并调用你的 if，它现在似乎可以工作了。

克隆这个 repo 并检查 - github.com/siddhartharora02/vue-stack