属性或方法“contact”未在实例上定义，但在渲染 Vuejs Laravel 期间被引用

Question

我正在使用 vue.js 在 laravel 上开发聊天应用程序，我是 vue.js 的新手。

但是我遇到了下面提到的错误，请帮我解决这个问题

错误1： [Vue 警告]：属性或方法“contact”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件

错误2： [Vue警告]：渲染错误：“TypeError：无法读取未定义的属性'头像'”

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

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

@Akash 你可以这样使用它：

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

我猜你可以这样做：

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

Answer 3

第一个错误是在您的Conversation.vue 中抛出，您正在将数据传递给子组件，您必须确保它被定义为该组件中的道具

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

如果它被定义，你的prop type 不期望一个空值。我会将其更改为字符串并在我的ChatApp.vue 中呈现时，我会将selectedContact 设置为 string.Empty||''

对于第二个错误，您的响应对象中缺少头像键。在访问它之前，您必须先检查它是否存在。请参考上面 El Alami Anas 的回答。