【发布时间】：2020-11-22 19:46:02
【问题描述】：
我通常不会为看起来很简单的东西发帖子，但是我整天都在我的 Vue 组件中使用这个 v-for 并且我仍然无法找出问题所在。父组件有一个正确的属性，包含它传递给子组件的帖子数组，但是创建的子组件太多（原始对象仅包含 3 个数组），并且所有这些子组件的属性都未定义，尽管在别处使用这个精确的 v-for 代码没有问题。
这是父组件：
<template>
<div class="user-post-section-cell-container">
<user-post
v-for="(post, index) of posts"
:image-src="post.imageSrc"
:key="index"
:id="post.id"
:caption="post.caption"
:location="post.location"
:href="post.href"
:friend-name="post.friendName"
:friend-img-src="post.friendImgSrc"
>
</user-post>
</div>
</template>
<script>
export default {
props: ['posts'],
}
</script>
这是父组件的父组件，因为上面的组件是嵌套的，再一次，在另一个组件下，它是如何向下传递其 post 数组的；
<template>
<div>
<user-post-section :posts="friendposts"</user-post-section>
</div>
</template>
<script>
export default {
props: ['friendposts'],
}
</script>
这是创建数组的实际视图文件；
<dashboard friendposts="[@foreach ($profiledata['friendposts'] as $friendpost)@foreach($friendpost as $post){imageSrc:'/storage/post_images/{{$post->picture_link}}',id:'{{$post->id}}',caption:'{{$post->caption_content}}',location:'{{ucfirst($post->location)}}',href:'/posts/{{$post->id}}',friendName:'{{$post->poster_username}}',friendImgSrc:'/storage/profile_images/{{$post->post_user_profile_picture}}'},@endforeach @endforeach]"></dashboard>
这是在浏览器上的 Vue 检查中的 posts 属性的外观；
posts: "[
{
"imageSrc": "/storage/post_images/5823896B-7980-4BBA-BB5B-E9623D194B22_1579753908.jpeg",
"id": "11",
"caption": "Caption",
"location": "Location",
"href": "/posts/11",
"friendName": "test",
"friendImgSrc": "/storage/profile_images/IMG-0030 (1)_1583849211_1583851620.JPG"
},
{
"imageSrc": "/storage/post_images/29985A50-E78F-42EF-B2FF-2D426B9D4FF0_1583024890.jpeg",
"id": "17",
"caption": "Caption2",
"location": "Location2",
"href": "/posts/17",
"friendName": "Testt",
"friendImgSrc": "/storage/profile_images/Rising-Sun-Circle-Jdm-Japanese-Vinyl-Decal-Sticker_1583024753.jpg"
},
{
"imageSrc": "/storage/post_images/28E01285-70C9-41CF-921C-C7E4DC8D946B_1581958302.jpeg",
"id": "14",
"caption": "Caption3",
"location": "Location3",
"href": "/posts/14",
"friendName": "Testt",
"friendImgSrc": "/storage/profile_images/Rising-Sun-Circle-Jdm-Japanese-Vinyl-Decal-Sticker_1583024753.jpg"
},
{
"imageSrc": "/storage/post_images/2001_1585774742.png",
"id": "21",
"caption": "Caption4",
"location": "Location4",
"href": "/posts/21",
"friendName": "Walker",
"friendImgSrc": "/storage/profile_images/blank.jpg"
}
]"
很抱歉包含 JSON 代码的这种意大利面条式排列，但重点是表明用于构建组件数组的对象格式正确，正如我所预料的那样，因为我之前使用过这两个组件，并且它们按预期工作，但现在我将它嵌套在另一个组件中，该组件向下传递数据，现在它不起作用。
这是子组件的属性字段
props: ['href', 'imageSrc', 'id', 'caption', 'location', 'friendImgSrc', 'friendName'],
老实说，我不知道发生了什么，因为这两个组件都可以独立运行，但是现在嵌套时它不再起作用，尽管据我所知 Vue 文档的格式正确。
【问题讨论】：
-
可以添加父子组件代码吗？
-
我可以，但我没有看到相关性，我提供了连接这两个组件的所有代码。为其容器提供样式有什么帮助？子组件的属性未定义，因此它的样式无关紧要。我将添加父母的父代码，至少是相关部分。
-
是的，只是您收到帖子并传递给孩子的部分，从我的角度来看，您当前的代码看起来不错
-
一件事是您在问题中添加的帖子 json 被
"包围，这意味着一个字符串，也许您只是从浏览器复制了字符串响应，它实际上是您组件中的一个对象数组? -
你介意在你的组件被挂载时放置console.log吗？
export default { props: ['friendposts'], mounted () { console.log(this.friendposts); }, }
标签： vue.js