如何在 vue.js 2 中的 v-for 循环中使用 v-if

Question

我有这个代码设置

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

person 对象中的 status 属性的所有值都是“public”！

但在上面的代码片段中，继续运行的不是 if 块，而是 else 块。

如果我像这样重写代码：

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

然后就可以正常工作了。

第一个片段有什么问题？

看起来“key”属性在其中发挥了作用。是我使用方式不对吗？为什么会影响输出？

其中哪一个是在“for”循环内编写“if”语句的最正确方法？

我之前一直在代码中的其他循环中使用第一种方法，直到今天才出现问题。我是否需要将它们全部更新为类似于第二种方法以避免出现这样的奇怪行为？

Answer 1

来自 vue v-for 与 v-if

您正确使用了 v-for 和 v-if。问题在于 :key 被放在条件块上。

无论哪种方式，某些内容都会在 div 中呈现，您有两种可能的结果，并且关键应该在 v-for 线上。您不应有条件地呈现 :key 属性。

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

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