vue.js：未定义属性或方法“”，渲染错误：“ TypeError：无法读取未定义的属性”

Question

我正在通过vue.js和laravel创建聊天应用。

我想将通讯录显示为Messenger应用。 但是我看不到用户列表。

在components / ContactsList.vue中，出现以下错误。

Property or method "contact" is not defined on the instance but referenced during render.

Error in render: "TypeError: Cannot read property 'profile_image' of undefined"

TypeError: Cannot read property 'profile_image' of undefined

这是ContactsList.vue代码。

<template>
    <div class="contacts-list">
        <ul>
            <li v-for="(contact ,index) in contacts" :key="contact.id" @click="selectContact(index, contact)" 
             :class="{ 'selected': index == selected }"></li>componvue.jsCont
                <div class="avatar">
                    <img :src="contact.profile_image" :alt="contact.name">
                </div>
                <div class="contact">
                    <p class="name">{{ contact.name }}</p>
                    <p class="email">{{ contact.email }}</p>
                </div>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        contacts: {
            type: Array,
            default: [],

        }
    },
    data() {
        return {
            selected: 0
        };
    },
    methods: {//selectContactをおしたら
        selectContact(index, contact) {
            this.selected = index;
            this.$emit('selected', contact);
        }
    }

}
</script>

和UserFactory.php

<?php

/** @var \Illuminate\Database\Eloquent\Factory $factory */
use App\User;
use App\Message;
use Illuminate\Support\Str;
use Faker\Generator as Faker;

/*
|--------------------------------------------------------------------------
| Model Factories
|--------------------------------------------------------------------------
|
| This directory should contain each of the model factory definitions for
| your application. Factories provide a convenient way to generate new
| model instances for testing / seeding your application's database.
|
*/

$factory->define(User::class, function (Faker $faker) {
    return [
        'name' => $faker->name,
        'phone' => $faker->phoneNumber,
        'email' => $faker->unique()->safeEmail,
        'profile_image' => 'http://via.placeholder.com/150',
        'email_verified_at' => now(),
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random(10),
    ];
});

$factory->define(Message::class, function (Faker $faker) {
    do {
        $from = rand(1,15);
        $to = rand(1, 15);
    } while($from == $to);
    return [
        'from' => $from,
        'to' => $to,
        'text' => $faker->sentence
    ];
});

我阅读了此文档，但无法弄清楚。  https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

如果您能帮助我，我感到很高兴。

Answer 1

您的结帐</li>在错误的位置。这导致contact变量落在v-for循环之外。

我想你想要

<ul>
    <li v-for="(contact ,index) in contacts" :key="contact.id" @click="selectContact(index, contact)" 
        :class="{ 'selected': index == selected }">
        <div class="avatar">
            <img :src="contact.profile_image" :alt="contact.name">
        </div>
        <div class="contact">
            <p class="name">{{ contact.name }}</p>
            <p class="email">{{ contact.email }}</p>
        </div>
    </li> <!-- CLOSING TAG -->
</ul>