陷入$ref指向vue路由器的Proxy对象

Question

我在浏览器模式下使用VueJS，现在正试图将代码切换到VueJS SPA和vue路由器。我已经被困了好几个小时了，因为裁判已经不工作了。

为了与我的谷歌图表交互，我使用了对图表的绝对引用(this.$refs.villesChart(来获得这样的选定数据：

computed: {
eventsprox() {
let eventsprox = {
select: () => {
var selection = "";
if (this.$refs.villesChart) selection = this.$refs.villesChart1.chartObject.getSelection();
if (selection.length) {
var row = selection0[0].row + 1;
this.code_commune = this.dataprox[row][4];
this.changerville(this.code_commune, this.dataprox[row][0]);
}
return false;
},
};
return eventsprox;
}

图形的HTML代码：

<GChart type="BarChart" id="villesChart" ref="villesChart" :data="dataprox" :options="optionsprox" :events="eventsprox"/>

我不知道为什么，但在浏览器模式下，这个$refs.villesChart是一个组件：[1] ：https://i.stack.imgur.com/xJ8pV.png

但现在它是一个代理对象，并失去了chartObject属性：[2] ：https://i.stack.imgur.com/JyXrL.png

我真的很困惑。你知道为什么吗？

如果我使用代理对象，那么我会收到Vue警告"；避免依赖于枚举组件实例上的键的应用程序逻辑"；并且它不在生产环境中工作。

非常感谢你的帮助！！

Answer 1

经过数小时的不同解决方案测试，我终于找到了一个可以使用Vue3和Vue谷歌图表1.1.0的解决方案。

我摆脱了"；参考文献"；并将事件定义和代码放在我的Vue 3应用程序的数据部分(而不是计算的(，并通过我用来填充的组件变量访问图表数据。

这是我的事件代码，this.dataproxy是我的图表数据表：

eventsprox: {
'click': (e) => {
const barselect = parseInt(e.targetID.split('#')[2]) + 1;
this.code_commune = this.dataprox[barselect][4];
this.nom_commune = this.dataprox[barselect][0];
this.changerville(this.code_commune, this.nom_commune);
}
},

我的Gchart html代码：

<GChart type="AreaChart" :data="datag" :options="optionsg" :events="eventsprox"/>

我希望它能有所帮助！