Si else bajo bucle anidado en vue.js mostrar el valor exacto

DK Hasib:

Estoy tratando de hacer un bucle para mostrar las entradas del blog. Dentro del bucle, utilizo otro bucle a buscar gustos del blog. Si el usuario de autenticación le gusta un blog, entonces yo quiero mostrar un botón de diferencia, de lo contrario un botón. Sin embargo, el bucle principal sigue mostrando 2 botones en lugar de uno cuando varios usuarios les gusta ese blog.

<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>

¿Qué estoy haciendo mal?

condición no están trabajando

y:

En lugar de utilizar un bucle interno, prueba una vez por blog si el usuario le gustó:

<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>

He aquí una demostración