Stuck with $ref pointing to Proxy object with vue-router

Question

I was using VueJS in browser mode and am now trying to switch my code to a VueJS SPA and vue-router. I've been stuck for hours with a $refs not working anymore.

To interact with my Google Charts, I was using an absolute reference to the graph (this.$refs.villesChart) to get selected data like that:

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 code for graph:

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

I don't know why, but in browser mode, this.$refs.villesChart is a component: [1]: https://i.stack.imgur.com/xJ8pV.png

but now it is a proxy object, and lost its chartObject attribute: [2]: https://i.stack.imgur.com/JyXrL.png

I'm really confused. Do you have an idea why?

And if I use the proxy object, then I get a Vue warning "Avoid app logic that relies on enumerating keys on a component instance" and it is not working in production environment.

Thanks a lot for your help!!

score 0 · Answer 1 · answered Sep 12 '22 at 14:32

After hours of testing different solutions, I finally found a solution working with Vue3 and Vue-google-chart 1.1.0.

I got rid of "refs" and put the events definition and code in the data section of my Vue 3 app (instead of computed) and accessed the chart data through a component variable I used to populate it.

Here is my event code where this.dataprox is my data table for the chart:

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);
            }
         },

My Gchart html code:

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

I hope it can help!

Stuck with $ref pointing to Proxy object with vue-router

1 Answers1