if else statement under nested loop in vue.js show the exact value

DK HASIB :

I'm trying to make a loop to show blog posts. Inside the loop, I use another loop to fetch blog likes. If the auth user liked a blog, then I want to show an unlike button, otherwise a like button. But the main loop keeps showing 2 buttons instead of one when multiple users like that 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>

What am I doing wrong?

condition are not working

Dan :

Instead of using an inner loop, test once per blog if the user liked it:

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

Here is a demo

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=405174&siteId=1

if else statement under nested loop in vue.js show the exact value

python learning 4-built-in function range(), loop structure, loop control statement, else statement, nested loop

Write a program that requires the input value of x and outputs the value of y. Use (1) non-nested if statement (2) nested if statement (3) if-else statement (4) switch statement respectively.

Go if-else statement, for loop, switch statement

Java nested if-statement vs if-else

Vue's v-if/show conditional statement and v-for loop statement---kalrry

The use method and related skills of loop statement in Vue.js

The if statement break is nested in the while loop, which statement should be jumped out?

Python3 loop _break and continue statement and else clause in loop

Sort Nested Json Object based on value in for loop?

[Python] loop statement② ( while nested loop | code example - while nested loop )

python Basic Tutorial: Python nested skills to use if and else statements in a for loop

vue.js基础__ v-if & v-else & v-show

JS if else statement: conditional judgment statement

Usage of JS for loop statement

Vue conditional judgment and loop traversal (v-if, v-elseif, v-else, v-show, v-for)

Summarize some knowledge points of vue3: Vue.js loop statement

Under the front-end Vue loop forEach and other loops, take the value method in an object under each item

if ... else if statement

Find the exact value

nested for loop

python entry tris (conditional and loop) of the [3-1 python if statement, if-else statement, if-elif-else statements]

if statement, if ... else statement analysis

Vue V-for nested loop array

Infinite loop and nested loop

Loop nested loop

js loop to get the value in table

if statement and loop statement

[Python] loop statement ③ ( case of while nested loop - print multiplication table | print print without line break | tab tab )

[Js loop statement] the difference between for and while