How to use v-if inside v-for loop in vue.js 2

I have this code setup

<div v-for="person in persons">
    <div v-if="person.status == 'public'" :key="person.id">
        Hi,my name is {{person.name}}
    </div>
    <div v-else :key="person.id">
        This person is private
    </div>
</div>

All the values of the status property in the person `s object are 'public', all!

But in the code snipet above, instead of the if block to run, it is the else block that keeps running.

If I re-write the code like this:

<div v-for="person in persons" :key="person.id">
    <div v-if="person.status == 'public'">
        Hi,my name is {{person.name}}
    </div>
    <div v-else>
        This person is private
    </div>
</div>

then it works correctly.

What is wrong with the first snippet?

It looks like the 'key' attribute has a hand in this. Am I using it incorrectly? Why is it affecting the output?

Which of them is the most correct way of writing 'if' statement inside 'for' loop?

I have been using the first method previously in other loops in my code, no issues until today. Do I need to update all of them to look like the second method to avoid strange behaviours like this?

From vue v-for with v-if
> When they exist on the same node, v-if has a higher priority than v-for. That means the v-if condition will not have access to variables from the scope of the v-for

You are using the v-for with v-if correctly. The problem is with :key being put on the conditional blocks.

Either way, something will render in the div, you have two possible outcomes and the key should be on the line with the v-for. You should not conditionally render :key attribute.

// 1
<div>
   <div>
      Hi,my name is john
   </div>
</div>

// 2
<div>
  <div>
     This person is private
  </div>
</div>