оператор if под вложенным l oop in vue. js показывает точное значение - PullRequest
Новая
       22

оператор if под вложенным l oop in vue. js показывает точное значение

1 голос
/ 04 апреля 2020

Я пытаюсь заставить al oop показывать сообщения в блоге. Внутри l oop я использую другой l oop для получения лайков блога. Если автору понравился блог, то я хочу показать кнопку «в отличие», в противном случае кнопку «Мне нравится». Но основной l oop продолжает показывать 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>

Что я делаю не так?

условие не работает

1 Ответ

0 голосов
/ 04 апреля 2020

Вместо использования внутреннего l oop, протестируйте один раз для блога, если пользователю понравилось: 

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

Вот демо

...