Question

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

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

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

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

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

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

我想你可以那样做：

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

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

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

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

，如果已定义，则您的prop type不应为空值。我将其更改为字符串，并在ChatApp.vue中进行渲染时，将selectedContact设置为string.Empty ||''

对于第二个错误，响应对象中缺少化身键。您必须先检查它是否存在，然后再访问它。请参考上面的El Alami Anas的答案。

属性或方法“联系人”未在实例上定义，但在渲染Vuejs Laravel

3 个答案: