[Vuejs]-Property or method "contact" is not defined on the instance but referenced during render Vuejs Laravel

by

2👍

✅

@Akash you can use it this way :

data() {
    return {
        contactsNotEmpty:false
    }
},
// ...
mounted() {
     axios.get('/contacts')
        .then((response) => {
            this.contacts = response.data;
            this.contactsNotEmpty = true;
        });
}

<ul v-if="contactsNotEmpty">
    ...
</ul>

also you may check this vuejs article about what is happening : https://vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating

👤khofaai

2👍

I guess you can do it like that:

<ul v-if="contacts.length > 0">
    <li v-for="contact in contacts" :key="contact.id">
        <div class="avatar">
             <img :src="contact.avatar" :alt="contact.name">
        </div>
        <div class="contact">
             <p class="name">{{ contact.name }}</p>
             <p class="email">{{ contact.email }}</p>
        </div>
    </li>
</ul>
👤Houssin Inani

0👍

The first error is throwing in your Conversation.vue, you were passing data to a child component, you have to make sure it is defined as a prop in that component

export default{
props: ['contact']
};

and if it is defined, your prop type is not expecting a null value. I would change it to string and on rendering in my ChatApp.vue, I would set selectedContact to string.Empty||”

For the second error, the avatar key is missing from your response object. You have to check if it is present first before accessing it. Kindly refer to El Alami Anas’s answer above.

👤FirstIndex

Leave a comment