vue.js : Property or method "" is not defined, Error in render: "TypeError: Cannot read property '' of undefined"

Question

I am creating chat app by vue.js and laravel.

I would like to show contacts list as messenger app. But I cannot see the list of users.

In components/ContactsList.vue, I have following errors.

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

This is ContactsList.vue code.

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

And 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
    ];
});

I read this document but I couldn't figure it out. https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

I am glad if you help me out.

Answer 1

Your closing</li> is in the wrong place. This is causing contact variables to fall outside of the v-for loop.

I assume you want:

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