Reputation: 431
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.
Upvotes: 1
Views: 2052
Reputation: 5149
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>
Upvotes: 4