Why does vue array become observer?

Question

I have a variable defined in data

data() {
    return {
        pie_graph_data:[],
   }
}

and this variable is not being anywhere. After getting response from server

let response = resp.data.success.pie_graph_data;
console.log(response);//this is array
console.log(this.pie_graph_data);//this is also an array
this.pie_graph_data = response;
console.log(response, this.pie_graph_data); //both become observer

I need to know if this.pie_graph_data is not used anywhere why its turning to observer and more importantly How do I use this variable in template as array.

The vue observer issue has been problematic for me from a long time. If we can't use the observer as array shouldn't there be method of converting it to array or at least using it. The Json Stringify method also does never work. — Yogesh.galav, May 12 '21 at 06:33
I was under the impression that the observers are neccessary to do the Vue magic. You can use the observer as if you had the array. So loop through it as normal. Does that not work? Can you share the pie_graph_data? Maybe the pie_graph_data is an object? — Peter Krebs, May 12 '21 at 07:39
@PeterKrebs Yes, I'm able to parse this observer but when used in chartjs graph it's not working. The props and data values are showing correct at each place. — Yogesh.galav, May 12 '21 at 19:33
It may be possible chartjs does not like the observers, although it should be handled transparently if the data structure is correct. Have you tested if the chart works with the array you receive from the backend? If yes you will likely have to remove the observers: https://stackoverflow.com/questions/62619240/i-want-simple-array-not-ob-observer — Peter Krebs, May 14 '21 at 07:37

score 0 · Answer 1 · answered May 13 '21 at 07:32

Logging pie_graph_data made you believe that it is just a plain empty array but actually it is not. If you can not see your arrays properties in your browsers console, you can log your empty arrays pie_graph_data.__ob__ property and you will see it is already an Observer. Arrays are iterable object and assigning additional properties doesn't make them lose their ability to be iterated over them. So there must be an other reason why chartjs is not working for you.

score 0 · Answer 2 · answered May 19 '21 at 04:51

The issue was in child component where computed property was using the observer being passed by props.

Converting the computed property into method(getChartData) and calling it in watcher solved the issue for me.

watch:{
    graphData(val){
        if(val && val.length){
            this.renderChart(this.getChartData(val),this.chartOptions);
        }
    }
},

Why does vue array become observer?

2 Answers2