Question

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

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

但是，当我单击任意一个“帐户”按钮时，将显示所有卡（请参见下图）

我的意思是设计v-for循环，通过设置布尔变量并仅在布尔值为true时才显示卡信息来仅显示所选帐户的卡，但是如您从输出屏幕截图中所见，显然不起作用。

我在做什么错，如何使该程序按照我描述的方式运行？

这是我的代码。

（v-for循环部分）

 <!-- If there is data for accounts, print it all out and then show the separate ID the user clicks on -->
            <div class="account-card-list"  v-for="(account,index) in accountsData" :key="account.id">
                <ul>
                    <li>
                        <span class="account" @click="clickAccountBtn(account.id)"  v-if="account.accountId == account.accountId"> 
                          Account {{index+1}}: 
                        </span>    
                        <span v-if="!accountBtnExpanded"> &nbsp; (← Click to expand)</span>
                        <span v-else> &nbsp; (← Click to fold)</span>
                        <br>
                        <br>
                        <ul v-if="accountBtnExpanded">
                            <li class="myList" v-for="(card,index) in cardsData" :key="card.id">
                                <span class="card" @click="getCardInfo(card.id)" v-if="card.accountId == account.id ">  
                                  <span class="cardBtn" @click="clickCardBtn()">Card {{index+1}} </span> &nbsp; &nbsp;  {{ card }}    
                                  <span v-if="cardBtnChosen">
                                    <br>
                                    <span class="cardInfo">CARDINFO:</span> {{ cardData }}
                                  </span> 
                                </span>                         
                            </li>
                            <ul>
                                <br>
                                <li ></li>
                            </ul>
                        </ul>
                    </li>
                </ul>
            </div>

这就是clickAccountBtn(account.id)方法的工作方式。

methods: {
      clickAccountBtn(accountId){
        if(this.accountBtnExpanded == false){
          this.accountBtnExpanded = true;
          this.findAccount(accountId);
        } else {
          this.accountBtnExpanded = false; 
        }
      },

Answer 1

使用数组来保存您选择的帐户。

数据中

selectedIds:[]

在模板中

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

然后，在点击处理程序中，切换数组中的项目ID。

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

您也可以使用object或set，甚至可以只限制一个id，但是一般方法仍然相同。

如何在v-for循环中单独呈现所选的类

1 个答案: