如何从Vue数组中获取指定用户数据？

从你的描述能看出来，post.like是一个数组类型（毕竟你能通过post.like.length拿到它的长度），这就是你直接用post.like.id或者post.like.user_id拿不到数据的原因——数组本身没有这些属性，这些属性是数组里的每一个对象元素才有的。下面给你几种常见的解决方法：

• 获取数组中第一个元素的特定属性
  如果你只需要数组里第一个点赞对象的id或user_id，可以通过数组索引来访问：

  @{{ post.like[0].id }}
  @{{ post.like[0].user_id }}
  

  不过要注意，如果post.like是空数组的话，直接这么写会报错。你可以加个判断避免错误：

  <!-- 先判断数组非空再渲染 -->
  <span v-if="post.like.length > 0">第一个点赞ID：@{{ post.like[0].id }}</span>
  <!-- 或者用可选链语法（Vue3或支持ES2020的环境可用） -->
  @{{ post.like?.[0]?.id }}
  

• 遍历所有点赞对象展示数据
  如果你需要把所有点赞的id和user_id都展示出来，可以用Vue的v-for指令遍历数组：

  <div v-for="(likeItem, index) in post.like" :key="index">
    点赞ID：@{{ likeItem.id }}，用户ID：@{{ likeItem.user_id }}
  </div>
  

  这里的likeItem就是数组里的每一个点赞对象，直接访问它的属性就可以了。

• 按条件查找特定的点赞对象
  如果你要找某个特定条件的点赞（比如某个用户的点赞），可以在组件里写一个方法或者计算属性来查找：

  // 在组件的methods中定义查找方法
  methods: {
    getTargetLike(post, targetUserId) {
      // 找到user_id匹配的点赞对象
      return post.like.find(like => like.user_id === targetUserId);
    }
  }
  

  然后在模板里调用这个方法：

  <!-- 假设要找user_id为123的点赞 -->
  <div v-if="getTargetLike(post, 123)">
    目标点赞ID：@{{ getTargetLike(post, 123).id }}
  </div>
  

内容的提问来源于stack exchange，提问作者Biswas Sampad