How to access the elements of [ob: Observer] in VueJS?

Question

I am fairly new to VueJS. There is a parent component, from which, data is passed to child and grandchild.

My Child component looks like this,

B.vue

import C from './c.vue'

export default{

    props:['info'],

    components:{
        'c': C
    },
    
    created: function(){
      this.getInfo();
    },

    methods: {
        getInfo: function(){
            console.log("Printing inside get method", this.info);
        }
    }
}

<template>
  <div>
    <c :info="info"></c>
  </div>
</template>

When I see the console, I see an array printed like this,

When i try to access the elements of the array like this, info[0], the console shows undefined. I am unable to access the elements of the array. Can someone please help me out here? Thanks!

The chrome inspector continues updating objects as the script runs. You could try logging a copy of the observable to see what I mean. You may need to either use a later lifecycle hook or subscribe to the observable to get the value you are looking for — Jami Couch, Nov 27 '17 at 04:14
@JamiCouch I tried logging it in the mounted life cycle hook. I am still unable to access. it says undefined. — CoderPJ, Nov 27 '17 at 04:22
How and where exactly are you trying to access `info[0]` in your code? — Grillparzer, Aug 06 '19 at 16:55

score 1 · Accepted Answer · edited Jul 15 '22 at 05:47

<template>
  <div>
    <c :info="info"></c>
  </div>
</template>

The :info="info" will pass your outer components info property into the c component. If that outer component does not have a property info it will result in the undefined you can see right now (according to comments).

If you simply want to test the behavior and your goal was to pass the string info into your component c than you can pass it as a string by doing it like:

<template>
  <div>
    <c :info="'info'"></c>
  </div>
</template>

or without the ::

<template>
  <div>
    <c info="info"></c>
  </div>
</template>

Why? Because : is shorthand for v-bind: which looks for javascript objects and since :info="info" is equal to :info=info you actually want to go with :info="'info'" since this would be equal to: info='info'.

You can read more about how this works in the Props Doc section of Vue.js: https://v2.vuejs.org/v2/guide/components-props.html

If the info property is set in your outer component - let us know how so we can help you further.

It does seem that the data is correctly passed into the B component (through its 'info' prop), as it logs an array. So I think `:info="info"` _is_ the way they should pass it to C. — Grillparzer, Aug 06 '19 at 16:54
@Grillparzer No, that's not correct. `:info="info"` will look for the variable `info` to pass as prop. If you want to pass string `info="info"` is how it should be. — Kalesh Kaladharan, Nov 03 '19 at 18:39

score 1 · Answer 2 · answered Sep 16 '20 at 13:58

In this case this.info is an :Observer because you are consoling the prop before it is fulfilled, in this exact case if you call this.getInfo() in the mounted() lifehook instead of created() you will be able to get the prop itself (as in the mounted() the props are already passed), and not the Observer.

So that's why you are able to see the object in the console as :Observer type and the content in it, but not this.info[0] as it is waiting for the prop to be passed.

Here you can find a threat talking more extensive about it : Vue JS returns [__ob__: Observer] data instead of my array of objects

score 0 · Answer 3 · answered Sep 26 '19 at 02:17

One way to debug this issue is to use a chrome extension called Vue.js DevTools which can be found at https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en. That extension would allow you to inspect props passed into each of your components, and with that information you should be able to determine where in the chain of parent, child, grand-child your props are getting lost.

score 0 · Answer 4 · answered Nov 09 '20 at 08:44

I found the solution in here:

https://forum.vuejs.org/t/how-to-access-the-elements-of---ob---observer-in-vuejs/22404/5

The child component doesn’t “wait” for axios to finish, so it’s initially rendered with an empty array for info.

If you want to wait for the data to be present before you render the child component, use v-if="info.length > 0" on the child component in the parent’s template.

Its working for me now, i wanted to share the solution i found.

score 0 · Answer 5 · answered Nov 18 '20 at 09:35

If you are trying to access the contents of info on create, the prop is probably not passed yet. You would be better off checking it out on mounted.

You are seeing the content of info in the console since the output in the browser console gets updated. If you want to now what the contents of info is on create, print the JSON representation like this: JSON.stringify(this.info)

score 0 · Answer 6 · answered Nov 27 '20 at 09:11

If the info comes from a server or any async method the mounted still throw an error if the data isn't ready before your child component mounted.

If the child component required the info props I think the best way to conditional rendering:

<c v-if="info" :info="info"></c>

or somithing like that. If you want a loading state you should handle the undefined data inside the child component, rendering a loading state if the info is undefined and render the other contents when it will be available.

How to access the elements of [__ob__: Observer] in VueJS?

6 Answers6

How to access the elements of [ob: Observer] in VueJS?