vue.jsでネストされたループの下else文は正確な値を示す場合

DK HASIB：

私は、ブログの記事を表示するようにループを作るしようとしています。ループ内で、私はブログの同類を取得するために別のループを使用します。認証ユーザーがブログを気に入った場合は、その後、私はとは異なり、ボタン、そうでない場合のようにボタンを表示したいです。しかし、メインループではなく、そのブログのような1時に複数のユーザーの2つのボタンを示し続けています。

<div class="post" v-show="blogs.length" v-for="blog in blogs" :key="blog.id">
  <span v-for="like in blog.likes" :key="like.id"> 
    <span v-if="blog.id === like.blog_id  && like.user_id === authUserId">
      <a href="#" class="link-black text-sm">
        <i class="fas fa-thumbs-down mr-1"></i> UnLike ({{blog.likes.length}}) 
      </a>
    </span>
    <span v-else>
      <a href="#" class="link-black text-sm">
        <i class="fas fa-thumbs-up mr-1"></i> Like ({{blog.likes.length}} )
      </a>
    </span>
  </span>
</div>

何が私が間違っているのでしょうか？

条件が機能していません

そして、：

代わりに、ユーザーがそれを好きならブログごとに一度内部ループ、テストを使用します：

<div class="post" v-show="blogs.length" v-for="blog in blogs" :key="blog.id">
  <span v-if="blog.likes.find(like => like.blog_id === blog.id && like.user_id === authUserId)">
    <a href="#" class="link-black text-sm">
      <i class="fas fa-thumbs-down mr-1"></i> UnLike ({{blog.likes.length}}) 
    </a>
  </span>
  <span v-else>
    <a href="#" class="link-black text-sm">
      <i class="fas fa-thumbs-up mr-1"></i> Like ({{blog.likes.length}})
    </a>
  </span>
</div>

ここでデモが