Vue V-For 返回未定义的组件属性

Posted 2023-02-23

【中文标题】Vue V-For 返回未定义的组件属性

【英文标题】：Vue V-For returning undefined component properties

【发布时间】：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); ,

【参考方案1】：

想通了，当然，简单的答案总是正确的。事实证明（因为我现在必须搜索文档才能发现）在属性传递中使用冒号非常重要。我的页面是这样写的：

<dashboard friendposts="[insert array of posts here]"></dashboard>

当它必须这样写时：

<dashboard :friendposts="[insert array of posts here]"></dashboard>

对于将属性与 :property、property 和 v-bind:property 互换传递给组件，我一直很漠不关心，因为这似乎并不重要。显然是的。希望这有帮助

【讨论】：

是的，有点尴尬，必须阅读不同通过方法之间的差异。最简单的解释通常是正确的。

你必须添加:来传递一个变量，并省略传递静态文本

【参考方案2】：

v-for 指令使用in 而不是of 保留字

【讨论】：

这是不正确的，Vue 文档状态要么是可以互换的。 vuejs.org/v2/guide/list.html

你的意思是v-for="(post, index) of posts"是正确的而v-for="(post, index) in posts"是错误的？

@ChristianCarrillo、in 和 of 都是 v-for 的正确语法