vue访问本地json数据渲染页面时，一旦遇到数组就报undefined？

Question

本地json文件

{
  "user": {
    "nickName": "Summer",
    "avatar": "https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg",
    "other": {
      "a": "退出登录",
      "b": "haha"
    }
  }
}

index.vue

<template>
  <div class="container">
    
    <section class="bg">
      <!--<blur class="br"
            :blur-amount=10
            :height=300
            :url="user.avatar ? user.avatar : ''"></blur> -->
      <div class="panel">
        <flexbox class="panel-user">
          <img :src="user.avatar">
          <flexbox-item class="detail">
            <h2>{{ user.nickName ? user.nickName : '未登录用户' }}</h2>
            <p class="a">{{ user.other.a }}</p> <!--控制台报user.other为undefined,页面渲染的结果却是对的 -->
            <p class="b">{{ user.other.b }}</p> <!--控制台报user.other为undefined,页面渲染的结果却是对的 -->
          </flexbox-item>
        </flexbox>
      </div>
    </section>
 
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
 // ...
  
  created () {
    this.$store.dispatch('getUserInfo')
  },
  computed: mapGetters({
    user: 'userInfo'
  })
// ...
}
</script>

控制台报user.other为undefined,页面渲染的结果却是对的

store.js

import api from '../../api/user'

// state
const state = {
  user: {}
}

// getters
const getters = {
  userInfo: state => state.user
}

// mutations
const mutations = {
  // 获取用户信息
  GET_USER_DATA (state, res) {
    state.user = res
  }
}

// actions
const actions = {
  getUserInfo ({ commit }) {
    api.getUserInfo(res => {
      commit('GET_USER_DATA', res)
    })
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

控制台报错信息

vue.esm.js?65d7:1447 TypeError: Cannot read property 'a' of undefined
    at Proxy.render (eval at <anonymous> (app.js:1933), <anonymous>:18:35)
    at VueComponent.Vue._render (eval at <anonymous> (app.js:723), <anonymous>:3608:22)
    at VueComponent.updateComponent (eval at <anonymous> (app.js:723), <anonymous>:2157:21)
    at Watcher.get (eval at <anonymous> (app.js:723), <anonymous>:2468:25)
    at new Watcher (eval at <anonymous> (app.js:723), <anonymous>:2451:12)
    at mountComponent (eval at <anonymous> (app.js:723), <anonymous>:2161:17)
    at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:723), <anonymous>:7251:10)
    at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:723), <anonymous>:9300:16)
    at init (eval at <anonymous> (app.js:723), <anonymous>:2930:13)
    at eval (eval at <anonymous> (app.js:723), <anonymous>:3245:5)

Answer 1

获取本地json文件是异步操作，一开始user为{}，所以会报 user.other 为 undefined

Answer 2

请截图报错信息
另外这里哪里有数组了……

Answer 3

console得看你在哪console，在组件里console一定没有，因为组件的data里都没有user，用了vuex，那你在mutation里console就一定能看到结果啦

Answer 4

state.user = res你在store中对结果赋值时，res等于{
"user": {

"nickName": "Summer",
"avatar": "https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg",
"other": {
  "a": "退出登录",
  "b": "haha"
}

}
}
仔细考虑您的赋值之后user的的值是{user:{
"user": {

"nickName": "Summer",
"avatar": "https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg",
"other": {
  "a": "退出登录",
  "b": "haha"
}

}
}}
您的user被多重嵌套了。在上面的数据格式中user.other.a自然就是undefined了。

解决办法：state.user = res.user。
很自豪的回答了你的问题。。ckaiCp

Answer 5

<div class="container">这一行换成<div class="container" v-if="user.data">可以解决此问题。

Answer 6

<div  v-if="jsonList.length>0">
    <span>{{jsonList[0].location.select.siteName}}</span>
    <span>{{jsonList[0].location.select.siteName}}</span>
    <span>{{jsonList[0].location.select.siteName}}</span>
    <span>{{jsonList[0].location.select.siteName}}</span>
</div>

这样就不会报错了