[英]vue.js : Property or method "" is not defined, Error in render: "TypeError: Cannot read property '' of undefined"
I am creating chat app by vue.js and laravel.我正在通过 vue.js 和 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.在 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
This is ContactsList.vue code.
这是 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>
And UserFactory.php和 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 .
https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties 。
I am glad if you help me out.如果你能帮助我,我很高兴。
Your closing </li>
is in the wrong place.你的结束
</li>
是在错误的地方。 This is causing contact
variables to fall outside of the v-for
loop.这导致
contact
变量落在v-for
循环之外。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.