Why does my API data show up as undefined when using a v-if in vue.js?

Question

TEMPLATE

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

responseData.followers.length works correctly but responseData.followers.includes($store.state.userId) does not. It gives me an error saying:

Cannot read property includes of undefined

SCRIPT

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

This is what my axios api call looks like

MIXINS

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)
                    })
                    }
                )
            }
        }
    }
}

When I console log responseData in the created() hook I get an empty proxy.

When I console log it in the mounted hook I get a proxy object with the correct data but if I try to call my API mixins from the mounted hook I still get the same error as before and the rest of my page breaks.

Console logging responseData in the browser returns undefined.

Answer 1

Try to make sure that you have responseData . As vue is first creating the template it is looking for properties in reponseData. And in this case it is not finding the properties. I faced such problems few times. The page is rendered before the api is returing data. Declare responseData: null and check

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

Answer 2

problem is here,

responseData.followers is not take place immediately when render. because api call response will take time. so replace that line like this way

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

and may be you should call those api synchronously, but it is depending on your requirement. if there is any dependency between those two api then should call synchronously but any other case it is ok.

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

There is little change required in your code like followers: [] has set in your data() return

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