I'm currently developing a chat app using vue.js and laravel.
My goal is to display the contacts list in a similar format to messaging apps, but I'm encountering difficulty viewing the list of users.
Within components/ContactList.vue, I'm experiencing the following errors:
Property or method "contact" is being referenced during render but is not defined on the instance.
Error in render: "TypeError: Cannot read property 'profile_image' of undefined"
TypeError: Cannot read property 'profile_image' of undefined
https://i.sstatic.net/4VfrU.png https://i.sstatic.net/J3cgT.png Here is the ContactsList.vue code snippet:
<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>
Also, here's the UserFactory.php code snippet:
<?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've gone through the documentation provided but still can't seem to resolve the issue. Here's the link to the Vue.js guide that I referenced: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
Your assistance in resolving this problem would be greatly appreciated.