title: vue js - Pass an object from parent to child component and iterate using v-for
body: <p>I've been playing around with Vue.js for the first time and so far, very cool framework.</p>
  <p>One scenario I encountered was trying to pass an object from the parent component to a child, then iterate using <code>v-for</code> directive. I went through the documentation and thought I could pass the object through <code>props</code> but I have a feeling since <code>favoriteObj</code> is a computed data object, it has to do with the rendering sequence as I am getting this in the console:</p>
  <pre><code>vue.esm.js?efeb:571 [Vue warn]: Property or method &quot;favoriteObj&quot; is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
  
  found in
  
  ---&gt; &lt;FavItem&gt; at src/components/FavItem.vue
         &lt;FavoriteStuff&gt; at src/components/FavoriteStuff.vue
           &lt;App&gt; at src/App.vue
             &lt;Root&gt;
  </code></pre>
  <p>Thanks for any info.</p>
  <p>Parent:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;fav-item :favoriteObj=&quot;favoriteObj&quot; &gt;&lt;/fav-item&gt;   
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  
  import {mapGetters} from 'vuex'
  import FavItem from '@/components/FavItem'
  
    export default{
      name: 'FavoriteStuff',
      data (){
        return{
          uid: localStorage.getItem('_uid'),
        }
      },
      computed: {
        ...mapGetters([
            'favoriteObj'
          ])
      },
      created (){      
          this.$store.dispatch('getFavoriteStuff', {uid: this.uid})
      },
      components: {FavItem}
    }
  &lt;/script&gt;
  </code></pre>
  <p>Child:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;ul class=&quot;list-group rpe-list&quot;&gt;
        &lt;li v-for=&quot;item in favoriteObj&quot; :key=&quot;item.id&quot; class=&quot;list-group-item rpe-item&quot;&gt;{{item.fav.name}}&lt;/li&gt;
      &lt;/ul&gt;    
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  
    export default{
     name: 'FavItem',   
     props: ['favoriteObj']  
   }
  
  &lt;/script&gt;
  </code></pre>
  <p>VUEX Code</p>
  <p>actions</p>
  <pre><code>export const getFavoriteStuff = ({commit}, {uid}) =&gt; {
    let favoriteStuff = db.ref( 'stuff-favorites/' + uid );
    return favoriteStuff.on('value', function(snapshot){
      console.log(snapshot.val)
      let favStuff = [];
      let idx_counter = 0; 
      snapshot.forEach(child =&gt;{
        idx_counter++;
        console.log(child.key)
        db.ref('stuff-detail/' + child.key).once('value', function(snapshot){
          console.log(snapshot.val())
          let obj = {
            id: child.key,
            recipe: snapshot.val()
          } 
          favStuff.push(obj)      
        })
      })
  
      if (idx_counter === snapshot.numChildren()){
        commit('favoriteObj', favStuff)
      }
    })
  
  }
  </code></pre>
  <p>mutations</p>
  <pre><code>export const favoriteObj = (state, payload) =&gt; {
      state.favoriteObj = payload
  }
  </code></pre>
  <p>getter</p>
  <pre><code>export const favoriteObj = state =&gt; state.favoriteObj;
  </code></pre>
  <p>index</p>
  <pre><code>import Vue from 'vue'
  import Vuex from 'vuex'
  import 'vue-awesome/icons'
  import Icon from 'vue-awesome/components/Icon'
  import * as getters from './getters'
  import * as actions from './actions'
  import * as mutations from './mutations'
  
  Vue.use(Vuex)
  Vue.component('icon', Icon)
  // Define values which will be stored as client-side state
  const state = {
  
      favoriteObj: &quot;&quot;
  
  };
  
  // Initialize a store with our getters, actions, mutations, state.
  
  const store = new Vuex.Store({
      state,
      getters,
      actions,
      mutations
  });
  
  export default store
  </code></pre>
  <p>EDIT:</p>
  <p>This was due to a type at the end of my Child component.  I simply forgot to close a <code>&lt;/script</code></p>