为什么在vue中使用v-if时，API数据显示为未定义。js？

Question

样板

<template>
<div class="profile-container">
    <div class="theme-container">
      <img class="theme" src="#" alt="PH">
    </div>
    <div class="profile-pic-container">
      <img class="profile-pic" :src="responseData.profile_pic" alt="PH">
    </div>
    <div class="profile-info-container">
      <div class="follow-message-button-container">
        <button class="direct-message-button btn"><svg><use href="#chat-icon"></use></svg></button>
        <Follow v-if="responseData.followers.includes($store.state.userId)"></Follow>
      </div>
      <h3 class="profile-username">@{{responseData.username}}</h3>
      <p class="profile-bio">{{responseData.bio}}</p>
      <div class="follower-following-count">
        <a href="#" class="follower-count">Followers: {{responseData.followers.length}}</a>
        <a href="#" class="following-count">Following: {{responseData.following.length}}</a>
      </div>
    </div>
  </div>
</template>

响应数据。追随者。长度正常工作，但响应数据。追随者。包括（$store.state.userId）不包括。它给了我一个错误，说：

无法读取未定义的属性包含

剧本

<script>
import Follow from "@/components/Follow";
import getAPICall from "@/mixins/getAPICall";
import getSecondAPICall from "@/mixins/getSecondAPICall";
import Post from "@/components/Post";

export default {
  name: "Profile",
  components: {Post, Follow},
  data() {
    return {
      list: [],
      responseData: {},
      responseData2: {},
      APIUrl: `api/user/${this.$route.params.userId}`
    }
  },
  methods: {
  },
  mixins: [getAPICall, getSecondAPICall],
  created() {
    this.getAPICall(this.APIUrl)
    this.getSecondAPICall(`api/user-post-list/${this.$route.params.userId}`)
  }
}
</script>

这就是我的axios api调用的样子

混血儿

import {getAPI} from "@/axios.api";
import store from "@/store";

export default {
    data() {
        return {
            getAPICall(APIUrl) {
                getAPI.get(APIUrl, {headers: {Authorization: `Bearer ${this.$store.state.accessToken}`}}
                ).then(response => {
                    this.responseData = response.data
                }).catch(err => {
                    console.log(err)
                    store.dispatch('useRefreshToken'
                    ).then(_ => {
                        console.log(_)
                        getAPI.get(APIUrl, {headers: {Authorization: `Bearer ${this.$store.state.accessToken}`}}
                        ).then(response => {
                            this.responseData = response.data
                            }).catch(err => {
                                console.log(err)
                            })
                    }).catch(err => {
                        console.log(err)
                    })
                    }
                )
            }
        }
    }
}

当我在created（）钩子中控制台log responseData时，我得到一个空代理。

当我将它登录到挂载的钩子中时，我会得到一个具有正确数据的代理对象，但是如果我尝试从挂载的钩子调用API mixin，我仍然会得到与以前相同的错误，我的其余页面会中断。

浏览器中的Console logging responseData返回未定义。

Answer 1

您的代码中几乎不需要更改，如followers:[]在数据（）中设置了返回

data() {
    return {
      list: [],
      responseData: {followers: []},
      responseData2: {},
      APIUrl: `api/user/${this.$route.params.userId}`
    }
  },

Answer 2

问题就在这里，

回答，塔塔。渲染时不会立即发生跟随者。因为api调用响应需要时间。这样替换那条线

  <Follow 
    v-if="responseData.followers && responseData.followers.includes($store.state.userId)">
    </Follow>

也许您应该同步调用这些api，但这取决于您的需求。如果这两个api之间存在任何依赖关系，那么应该同步调用，但在其他任何情况下都可以。

//asynchronous operation

    created() {
        this.getAPICall(this.APIUrl)
        this.getSecondAPICall(`api/user-post-list/${this.$route.params.userId}`)
      }

//synchronous operation
async created() {
   await this.getAPICall(this.APIUrl)
   await this.getSecondAPICall(`api/user-post-list/${this.$route.params.userId}`)
  }

Answer 3

尝试确保你有响应数据。当vue首先创建模板时，它正在reponseData中查找属性。在这种情况下，它没有找到属性。我曾几次面对这样的问题。页面在api获取数据之前呈现。声明响应Data： null并检查

<div class="profile-container" v-if=" responseData !== null">