使用VUEJS需要同时遍历2个对象

Question

我只想以相同的速度通过帖子和USERINFO，以一种方式显示给定帖子的正确用户头像

对象

   posts : {!! $posts !!},
   userinfo : {!! $userinfo !!}, 

模板

< v-cloak v-for="post in posts">
  <div v-bind:style="{ backgroundImage: 'url(' + post.picture + ')' }">
<a href="{{-- url("#" v-bind:style="{ backgroundImage: 'url(' + userinfo.avatar + ')' }"></a>
</div>

不知道怎么..。基本上..。

Answer 1

正确的方式(IMHO)是以正确的方式将数据提供给模板，因此模板只会以最少的时间遍历数据。

支持computed值可能是最简单的实现方式。

您可以在计算值中使用js创建一个复杂的循环，然后减少模板中的任何复杂逻辑。如果组件或模板的其他部分正在改变，这也可以减少所需的渲染或重新计算的次数。

其他选项是使用监视或通过api回调更新data.variable。

Answer 2

我认为你可以给你的user对象添加一个属性id。和一个属性userId到你的post对象，以避免错误。

用户必须是您的元素的道具，才能在其中使用