Question

我第一次玩Vue.js，到目前为止，非常酷的框架。

我遇到的一个场景是尝试将对象从父组件传递给子组件，然后使用v-for指令进行迭代。我浏览了文档，并认为我可以通过props传递对象，但我有一种感觉，因为favoriteObj是一个计算数据对象，它与渲染序列有关，因为我在控制台：

vue.esm.js?efeb:571 [Vue warn]: Property or method "favoriteObj" 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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <FavItem> at src/components/FavItem.vue
       <FavoriteStuff> at src/components/FavoriteStuff.vue
         <App> at src/App.vue
           <Root>

感谢您的任何信息。

父：

<template>
  <div>
    <fav-item :favoriteObj="favoriteObj" ></fav-item>   
  </div>
</template>


<script>

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}
  }
</script>

子：

<template>
  <div>
    <ul class="list-group rpe-list">
      <li v-for="item in favoriteObj" :key="item.id" class="list-group-item rpe-item">{{item.fav.name}}</li>
    </ul>    
  </div>
</template>


<script>

  export default{
   name: 'FavItem',   
   props: ['favoriteObj']  
 }

</script>

VUEX代码

动作

export const getFavoriteStuff = ({commit}, {uid}) => {
  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 =>{
      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)
    }
  })

}

突变

export const favoriteObj = (state, payload) => {
    state.favoriteObj = payload
}

吸气剂

export const favoriteObj = state => state.favoriteObj;

索引

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: ""

};

// Initialize a store with our getters, actions, mutations, state.

const store = new Vuex.Store({
    state,
    getters,
    actions,
    mutations
});

export default store

编辑：

这是由于我的Child组件末尾有一个类型。我只是忘了关闭</script

vue js - 将对象从父组件传递给子组件，并使用v-for进行迭代

0 个答案: