Vue.js 如何在v-for循环中单独渲染选定的类

我正在编写一些练习代码，其中将显示客户帐户和卡的列表（请参见附图）

每个“帐户”都包含多张“卡”，我希望这个程序显示指定帐户包含的卡。例如，如果我单击“帐户1”按钮，则只应显示存储在帐户1中的卡

但是，当我单击任何帐户按钮时，将显示所有卡（请参见附图）

我的意思是设计v-for循环，通过设置一个布尔变量，让卡信息仅在布尔值为true时显示，从而只显示所选帐户的卡，但是从输出屏幕截图中可以看出，这显然不起作用

我做错了什么，如何让这个程序按照我描述的方式运行

这是我的密码

（v-用于回路部件）

---

使用数组保存选定的帐户

在数据中

selectedIds:[]

模板中

<ul v-if="selectedIds.includes(account.id)">

---

您还可以使用

对象

或

集

，甚至只限制单个id，但是一般的方法仍然是一样的。

您需要访问其他卡以将其

accountBtnExpended

设置为false，或者您也可以将最后一张消耗的卡保存在全局变量中，并仅将此卡的

accountBtnExpended

设置为false您的意思是我应该保存最后一张扩展卡的索引吗信息作为全局变量，仅显示指定索引的卡片信息？您可以使用v-for循环中的

索引

，并将其传递到函数中。然后，以编程方式查找该卡片索引以仅展开该卡片。您的问题是，您的布尔值绑定到每一张卡，因此扩展其中一张卡将扩展所有卡。我是否应该准备多个布尔值变量，如布尔值数组？例如，如果有10张卡，我应该有像“isExpanded[10]”这样的变量吗？（当然，在这种情况下数组的大小应该是动态分配的）IMO最好的方法是创建一个“卡”组件，并在循环中使用这个组件，它实际上会将每个卡绑定到Boolth。这就是我想要的答案！当我自己尝试时，我意识到SelectedId不必是数组。只需要一个原语类型变量selectedId，然后像这样分配值就可以了。selectedId=accountId。然后将v-if语句的条件设置为

。但不管怎样，你的回答对我来说是一个很好的提示，我很感激：DI在最后更新了注释，以包含你的单一选择用例。

selectedIds:[]

<ul v-if="selectedIds.includes(account.id)">

clickAccountBtn(accountId) {
  const idx = this.selectedIds.indexOf(accountId);
  if (idx > -1) {
    this.selectedIds.splice(idx, 1);
  }
  else {
    this.selectedIds.push(accountId);
  }