Свойство или метод "contact" не определен в экземпляре, но на него ссылаются во время рендеринга Vuejs Laravel

Question

Я разрабатываю приложение чата на laravel, используя vue.js, и я новичок в vue.js.

, но я получаю указанную ниже ошибку, пожалуйста, помогите мне решить эту проблему

Ошибка1: [Vue warn]: свойство или метод "contact" не определен в экземпляре, но на него ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство

Ошибка2: [Vue warn]: Ошибка при отображении: «Ошибка типа: Ошибка чтения свойства» аватар'undefined "

/ файл ChatApp.vue /

    <template>
    <div class="chat-app">
    <Conversation :contact="selectedContact" :messages="messages"/>
    <ContactsList :contacts="contacts"/>
    </div>
    </template>

    <script>
    import Conversation from './Conversation.vue';
    import ContactsList from './ContactsList.vue';

    export default {
    props: {
        user: {
            type: Object,
            required: true
        }
    },  
    data(){
        return {
            selectedContact: null,
            messages: [],
            contacts: []
        };
    },        
    mounted(){
        axios.get('/contacts')
        .then((response) => {
            this.contacts = response.data;
        });
    },
    methods: {
        startConversationWith(contact) {
            axios.get(`/conversation/$(contact.id)`)
                .then((response) => {
                    this.messages = response.data;
                    this.selectedContact = contact;
                })
        }
    },
    components: { ContactsList, Conversation }
    };
    </script>

/ файл ContactsList.vue /

    <template>
    <div class="contacts-list">
    <ul v-if="contacts.length > 0">
        <li v-for:"(contact, index) In contacts" :key="contact.id" 
    @click="selectContact(index, contact)" :class="{ 'selected' : index == 
    selected}">
            <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>
    </div>
    </template>

    <script>
    export default {
    props: {
    contacts: {
        type: Array,
        default: []
    }
    },
    data() {
     return {
        selected: 0
     };
    },
    methods: {
     selectContact(index, contact) {
         this.selected = index;
         this.$emit('selected', contact);
     }
    }
    };
    </script>

/ разговор.vue /

    <template>
    <div class="conversation">
    <h1>{{ contact ? contact.name : 'Select a contact' }}</h1>
    <MessagesFeed :contact="contact" :messages="messages" />
    <MessageComposer @send="sendMessage" />
    </div>
    </template>

    <script>
    import MessagesFeed from './MessagesFeed.vue';
    import MessageComposer from './MessageComposer.vue';

    export default {
     props: {
        contact: {
            type: Object,
            default: null
        },
        messages: {
            type: Array,
            default: []
        }
    },
    methods:{
        sendMessage(text) {
            console.log(text);
        }
    },
    components: {MessagesFeed, MessageComposer}
    };
    </script>

Answer 1

@ Акаш, вы можете использовать это следующим образом:

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

---

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

также вы можете проверить эту статью vuejs о том, что происходит: https://vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating

Answer 2

Первая ошибка выдает Conversation.vue, когда вы передаете данные дочернему компоненту, вы должны убедиться, что он определен как опора в этом компоненте

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

и если оно определено, ваш prop type не ожидает нулевого значения.Я бы изменил его на строку, и при рендеринге в моем ChatApp.vue я бы установил selectedContact в строку .Empty || ''

Для второй ошибки, ключ аватара отсутствует в вашем объекте ответа.Вы должны проверить, присутствует ли он, прежде чем получить к нему доступ.Пожалуйста, обратитесь к ответу Эль Алами Анаса выше.

Answer 3

Я думаю, вы можете сделать это так:

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