在Vue.js中如何读取JSON对象嵌套key 渲染Django API返回的用户数据

问题排查 #

以下是你代码里的几处核心错误：

• v-for遍历对象错误：你返回的APIData是接口返回的顶层响应对象，用户列表实际存储在APIData.results数组中。直接遍历APIData只会拿到count、next、previous、results这几个顶层字段，无法获取到用户数据。
• v-for变量引用错误：你在v-for里定义的遍历别名是results，但模板中实际使用的是未定义的result变量，且:result="results"是给当前div绑定自定义属性，不会在当前模板作用域生成可用变量，属于无效写法。
• Vuex状态修改不符合规范：Vuex要求必须通过mutation修改state，直接赋值this.$store.state.APIData = xxx不会触发响应式更新，因此视图不会同步刷新。
• 缺少空值判断：接口请求完成前APIData可能是空值，直接访问属性会触发控制台报错，也会影响渲染逻辑。

修正方案 #

第一步：先在Vuex配置中新增修改状态的mutation #

// 你的Vuex store配置文件
export default new Vuex.Store({
  state: {
    APIData: null, // 记得给APIData设置初始值
    accessToken: ''
  },
  // 新增mutation修改状态
  mutations: {
    SET_API_DATA(state, data) {
      state.APIData = data
    }
  }
})

第二步：修正组件模板代码 #

<template>
    <div>
        <h1> Users </h1>
        <!-- 先判断数据存在再遍历，避免空值报错 -->
        <div v-if="APIData?.results?.length" v-for="user in APIData.results" :key="user.username">
            <h5>{{ user.username }}</h5>
            <p>{{ user.email }}</p>
        </div>
        <div v-else>暂无用户数据</div>
    </div>
</template>

第三步：修正组件请求逻辑，用commit提交mutation修改状态 #

<script>
import { getAPI } from '../axios-api';
import { mapState } from 'vuex';

export default {
    name: 'Users',
    computed: mapState(['APIData']),
    created() {
        getAPI.get('/v1/users/', { headers: { Authorization: 'Bearer ' + this.$store.state.accessToken } })
        .then(response => {
            // 通过commit提交mutation触发响应式更新
            this.$store.commit('SET_API_DATA', response.data)
        })
        .catch(error => {
            console.log(error)
        })
    }
}
</script>

内容的提问来源于stack exchange，提问作者JimmyOppa