javascript - VueJs - 如何在 v-if 中使用变量？

Question

我是 VueJs 的新手如何在 v-if 中使用变量？

我的.js文件

data: {
    member: [
      {
        id:"1",
        Firstname: "Peter",
        Lastname: "Super"
      },
      {
        id:"2",
        Firstname: "Roger",
        Lastname: "Power",
      }

我的 HTML 文件

然后我想这样编码。

<li v-for="member in members" v-if="members.Firstname === 'Peter'">
   //display data about id 1 Peter Super
</li>

但是是否可以在 v-if 中使用变量，例如

<script>
var name = 'Peter';
</script>
<li v-for="member in members" v-if="members.Firstname === name">
   //display data about id 1 Peter Super
</li>

非常感谢你

标签： javascriptvue.js

Answer 1

您还需要添加key参数。更多信息：https ://vuejs.org/v2/guide/list.html

To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item:

此外，问题出在您使用的 v-if 中，members而不是member

请尝试以下方法：

<li v-for="member in members" :key="member.id" v-if="member.Firstname === 'Peter'">
   //it will display id 1 Peter Super
</li>