Javascript 在提取和安装完成后做一些事情

我有一个简单的nuxt.js组件，如下所示

Chart

是一个组件，它具有一个方法，该方法将接收在

fetch（）

中提取的数据

如果我只是在

wait fetch（“…”）

之后调用该方法，则在客户端呈现该方法时会出现错误，因为

Chart

组件尚未装入。我怎么能在取货和上马后去做点什么呢

我无法在

mounted（）

中执行此操作，因为这样我就无法确定提取是否完成

<template>
    <div>
        <!--Custom component-->
        <Chart ref="chart"/> 
    </div>
</template>

<script>
    export default {
        data(){
            return {
                chartData: []
            }
        },
        async fetch() {
            this.chartData = await fetch('https://api.mocki.io/v1/b1e7c87c').then(res =>
                res.json()
            )
            this.$refs.chart.insertSeries(this.chartData) // doesn't work because Chart is not mounted yet.
        },
    }
</script>

导出默认值{
数据（）{
返回{
图表数据：[]
}
},
异步获取（）{
this.chartData=等待获取（'https://api.mocki.io/v1/b1e7c87c）。然后（res=>
res.json（）
)
此.$refs.chart.insertSeries（this.chartData）//无法工作，因为尚未装入图表。
},
}

处理这种情况的首选方法是使用道具，以便

能够处理数据本身，并在孩子身上观看道具

母公司

图表

---

变体：您可以使用

v-if

代替

手表

：

母公司

图表

导出默认值{
道具：['chartData']，
创建（）{
此.insertSeries（this.chartData）；//`chartData`保证存在
}
...
}

---

注意：这两个选项之间可能会出现细微差异。假设您希望在加载图表数据时加载动画

---

对于第一个选项，由于组件会立即显示，因此加载功能必须放在子组件中。在第二个选项中，它将放在父级中（在

v-else

中）。

您使用的是哪个图表提供程序？图表是第三方组件吗？是的，我使用的是HighCharts。但图表是我自己做的一个包装。所以这更像是一个关于如何调用任何方法的一般性问题。

export default {
  props: ['chartData'],
  watch: {
    chartData(newValue) {
      if(newValue.length) {
        this.insertSeries(newValue);
      }
    }
  },
  ...
}