Cannot read properties of undefined (reading 'userId') in vue

I am try to load an object by axios and print it by using v-text

but The problem was occured

when I access to array element of item object it express an exception

like Cannot read properties of undefined (reading 'userId')

<template>
    <div class="box">
        <div class="images">
            <div v-for="(photo,index) in item.photos" :key="index">
                <img :src="`http://localhost:8080/images/${photo}`" class="image" />
            </div>
        </div>
        <hr/>
        <div class="profile">
            <div class="user">
                <div class="photo">
                    
                </div>
                <div>
                    //The problem is this
                    //publisher is an array
                   <span> {{ item.publisher.userId }} </span>
                     
                </div>
            </div>

            <div>
                
            </div>
        </div>
        <hr/>
        <div>
            <h2>{{ item.title }}</h2>
                <h3>{{ item.price }}</h3>
                <p>
                    {{ item.content }}
                </p>
        </div>

    </div>
</template>



<script>

export default{

    data(){
        return{
            item:{},
            user:{}
            
        }
    },
    mounted(){
        this.$axios.get(`http://localhost:8080/item/${this.$router.currentRoute._value.params.id}`)
        .then((response)=>{
           this.item=response.data;
           console.log(this.item.publisher.userId);
        });
        
    },
    



}
</script>

I think it happend because item.publisher is null when mount life cycle

so how can I fix it well?

>Solution :

Print the this.item=response.data;
like console.log(this.item) if item i not on console its not coming from back end you have to make sure that API and its query is correct if its printing then
it happens some times page and there variable loaded first soon mounted the the variables obviously come undefined because you didn’t declare , you just declare
item{} not

item{
publisher{
userId:""
}
}

so you have two options whether to declare

data() {
  return {
    item: {
      publisher: {
        userId: ""
      }
    },
    user: {}
  };
}

in

 return{
            item:{},
            user:{}
            }

or just use

 <span> {{ item?.publisher?.userId }} </span>