Javascript 使用HighCharts vue时如何回流HighCharts？

我有一个非常简单的组件：

<template>
    <div>
        <chart
            v-if="!loading"
            ref="priceGraph"
            constructor-type="stockChart"
            :options="chartData"
            :deepCopyOnUpdate="false"
        />
        <div v-else>Loading...</div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { EventBus } from "../events";
import { Chart } from "highcharts-vue";
import { PriceData } from "src/models/DataFile";

@Component({
    components: { Chart }
})
export default class PriceChart extends Vue {
    @Prop({ type: Boolean, required: true })
    readonly loading!: boolean;

    @Prop({ type: Array, required: true })
    readonly prices!: PriceData;

    mounted() {
        EventBus.$on("reflow", () => {
            // NOT RIGHT:
            this.$refs.priceGraph.chart.reflow();
        });
    }

    get chartData() {
        return {
            xAxis: {},
            yAxis: {},
            series: [
                {
                    type: "candlestick",
                    data: this.prices
                }
            ]
        };
    }
}
</script>

如果忽略此错误并运行代码，则控制台中的

this.$refs.priceGraph未定义（尽管Vue Dev工具显示它已填充），则该错误将失败。见附件：


我做错了什么？
它应该完全按照您描述的那样工作，因此在
上调用
回流
。$refs.priceGraph.chart
应该足够漂亮了。我在这里想到的一件事是，图表组件具有
v-if
属性，这可能会以某种方式阻止Vue在调用
mounted
lifecycle钩子之前对其进行渲染，我的意思是该引用当时还不可用。你能在现场演示中重现这个问题吗？这里有一个很好的起点，它表明可以用上述方式调用
reflow
：关于Typescript错误，我们知道包装器可能会产生错误，因为事实上Vue v2在类型意义上有点难以处理。我们肯定需要在更新包装器以使用v3的同时处理打字。我将您链接的演示分叉，并尝试重新创建我尝试执行的基本操作（）。我注意到，奇怪的是，每当我编辑一个文件并重新构建它时，我就开始出现控制台错误（即使我只是对CSS做了一点小小的调整，而不接触JavaScript）。我必须刷新整个编辑器（不仅仅是其中的迷你浏览器）才能让它重新工作。即使在工作中，我也会得到与期望相反的行为（图表的大小永远都不合适），谢谢。这个问题看起来像是Vue性质的问题，因为组件数据的
this.toggle
类正在正确更改，包含元素的引用的类名不会立即更改，实际上在真正的类更改之前调用了
reflow（）
方法。避免这种情况的最快方法是使用
setTimeout
包装回流方法，并以1ms的延迟调用它，然后它将按照您的预期工作。下面是演示：我想我的
\u this.$refs.priceGraph未定义的问题与我在代码沙盒中看到的问题有关，在代码沙盒中，每当我进行更改时都必须刷新页面。也许我需要清除缓存，重新启动VS代码，重建整个项目。不过，我希望有一个适当的解决方案来解决我的打字脚本问题，而不是随便在任何地方添加
/*ts ignore*/
ERROR in /home/stevenbarnett/Repos/stockgraph/src/components/PriceChart.vue(33,26):
TS2339: Property 'chart' does not exist on type 'Element | Element[] | Vue | Vue[]'.
  Property 'chart' does not exist on type 'Element'.
Version: typescript 3.9.5