Я использую vue.js и laravel 5.8. В моей системе комментирования, такой как youtube,
Я хочу показать изображение профиля пользователя.
Если у пользователя нет изображения профиля, я хочу показать аватар.
У меня много пользователей, поэтому я хочу показать несколько изображений профиля на основе идентификатора.
Теперь я получил эту ошибку.
"Ошибка типа: невозможно использовать" в'оператор для поиска' 'в 1571585278.jpg "
В соответствии с этой ошибкой консоли, я получаю изображение профиля (1571585278. JPG). Но я не могу показать его, потому что оператор 'in' недоступен.
Кроме того, я не могу показать аватар пользователя. Хотя я использовал метод if.
<div else class="user" >
<avatar :username="comment.user.name" :size="45"></avatar>
</div>
Я храню изображения в public / uploads.
Как исправить ошибку при рендеринге: «TypeError: Невозможно использовать оператор« in »дляпоиск '' in?
user.php
protected $with = ['profile'];
comment.vue
<template>
<div>
<div class="reply-comment" >
<div class="user-comment">
<div class="user" v-if="comment.user.profile.image && comment.user.profile.image.length > 0">
<span :v-for="(item, index) in comment.user.profile.image">
<img :src="'/uploads/' + item.comment.user.profile.image">
</span>
</div>
<div else class="user" >
<avatar :username="comment.user.name" :size="45"></avatar>
</div>
<div class="user-name">
<span class="comment-name"><a :href=" '/user/' + 'profile' +'/'+ comment.user.id + '/' ">{{ comment.user.name }}</a></span>
<p>{{ comment.body }}</p>
</div>
</div>
</div>
<div class="reply">
<button @click="addingReply = !addingReply" class="reply-button" :class="{ 'red' : !addingReply, 'black' : addingReply }">
{{ addingReply ? 'Cancel' : 'Add Reply'}}
</button>
</div>
<div class="user-reply-area" v-if="addingReply">
<div class="reply-comment">
<div v-if="!auth">
<button @click="addReply" class="comment-button">Reply</button>
<input v-model='body' type="text">
</div>
</div>
</div>
<replies ref='replies' :comment="comment"></replies>
</div>
</template>
<script>
import Avatar from 'vue-avatar'
import Replies from './replies.vue'
export default {
components: {
Avatar,
Replies
},
data() {
return {
body: '',
addingReply: false,
auth: '',
item: '',
index: ''
}
},
props: {
comment: {
required: true,
default: () => ({})
},
post: {
required: true,
default: () => ({})
}
},
methods: {
addReply() {
if(! this.body) return
axios.post(`/comments/${this.post.id}`, {
comment_id: this.comment.id,
body: this.body
}).then(({data})=> {
this.body = ''
this.addingReply = false
this.$refs.replies.addReply(data)
})
.catch(function (error) {
console.log(error.response);
});
}
}
}
</script>