Question

我在挂载函数中创建了一个for循环，以从vuejs存储状态提取数据，该状态从 firebaseOnAuthChanged 获取数据，但是每次我运行页面时，我都会得到：

已挂接的钩子中出现错误：“ TypeError：无法读取> undefined的属性'creditData'

我尝试直接使用 this.userProfile.transactions.creditData[0].amount 我有要显示的数据，但有循环我无法显示

这是脚本...

import LineChart from '@/components/LineChart'
import { mapState } from 'vuex'
import { store } from '@/store'
export default {
name: 'dashboard',
components: {
    'line-chart': LineChart
  },
 data () {
    return {
      totalCredit: 0,
      totalDebit: 0,
      totalInterest: 0,
      test: []
    }
  },
  computed: {
    ...mapState({ userProfile: 'userProfile', currentUser: 'currrentUser' 
})
  },
  mounted: function () {
    if (this.userProfile) {
      for (var i = 0; i <= this.userProfile.transactions.creditData.lenght; 
i++) {
        this.totalCredit += 
this.userProfile.transactions.creditData[i].amount
        this.test.push(this.userProfile.transactions.creditData[i].amount)
      }
      for (var x = 0; x <= this.userProfile.transactions.debitData.lenght; 
x++) {
        this.totalDebit += this.userProfile.transactions.debitData[x].amount
      }
      if (this.totalCredit >= 25000) {
        this.totalInterest = this.totalCredit / 100 * 1.98
      } else { this.totalInterest = this.totalCredit / 100 * 1.5 }
    }
  }
}

这是我的商店脚本...

import Vue from 'vue'
import Vuex from 'vuex'
const fb = require('@/firebaseConfig.js')

Vue.use(Vuex)

fb.auth.onAuthStateChanged(user => {
  if (user) {
   store.commit('setCurrentUser', user)
   store.dispatch('fetchUserProfile')

    fb.usersCollection.doc(user.uid).onSnapshot(doc => {
      store.commit('setUserProfile', doc.data())
     })
   }
})

export const store = new Vuex.Store({
  state: {
    currentUser: null,
    userProfile: {}
  },
  actions: {
    clearData ({ commit }) {
      commit('setCurrentUser', null)
      commit('setUserProfile', {})
    },
    fetchUserProfile ({ commit, state }) {
      fb.usersCollection
        .doc(state.currentUser.uid)
        .get()
        .then(res => {
          commit('setUserProfile', res.data())
        })
        .catch(err => {
          console.log(err.message)
        })
    }
  },
  mutations: {
    setCurrentUser (state, val) {
      state.currentUser = val
    },
    setUserProfile (state, val) {
      state.userProfile = val
    }
  }
})

这是我称为数据的视口...

<h3> {{totalCredit}}</h3>
<h3> {{totalDebit}}</h3>
<h3> {{totalInterest}}</h3>

如果我直接从查看端口{{ userProfile.transactions.creditData }}调用数据，则是从Firestore接收数据时的格式。

[ { 
   "amount": 1000, 
   "date": { "seconds": 1545491831, "nanoseconds": 993000000 }, 
   "status": "successful", 
   "transID": 123456789 
 } ]

如果交易条目更多，我希望{{ totalCredit }}的结果为1000或更多

Answer 1

Javascript正在异步运行您的函数，因此，在调用Collection.insert({ something: something //insert to Mongo }, (error, response) => { console.log(error, result //get the response )});循环挂钩时，您仍然没有要为存储库获取的数据，mounted仍未定义，这就是为什么要这样做得到错误。

如何解决？

首先，this.userProfile.transactions中的条件是

mounted

因此，只有在if (this.userProfile) { //whatever }为真时，您才能进入内部，但是您在this.userProfile中将其定义为store，这是正确的，因此您将始终进入内部。最好将其定义为userProfile: {}或更改条件。

现在，如果没有userProfile: undefined，您将永远无法进入。但是您仍然希望仅在提取数据后调用userProfile，因此将mounted组件置于v-if条件下，以使其获得仅在获取数据后才呈现，因此父模板将包含：

dashboard

如何修复Vuejs：挂接的钩子中出现错误：“ TypeError：无法读取未定义的属性'creditData'

1 个答案: