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

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


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


<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://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.


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.