How to individually render just the chosen class in a v-for loop

Question

I'm working on some practice code where a list of customer accounts and cards is to be displayed (see the attached image).

Each of the "Accounts" contains multiple "Cards", and I want this program to show the cards that the designated Account contains. For example, if I click the button "Account 1", only the cards that are stored in Account 1 should be displayed.

However, when I click any of the Account buttons, all of the cards are displayed (see the attached image)

I meant to design the v-for loop to display just the chosen account's cards by setting a boolean variable and letting the card information be displayed only when the boolean value is true, but as you can see from the output screenshot, this is apparently not working.

What am I doing wrong, and how do I get this program behave the way I described?

Here is my code.

(v-for loop part)

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

and this is how the clickAccountBtn(account.id) method works.

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

Answer 1

Use an array to hold your selected accounts.

In data

selectedIds:[]

In template

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

Then, in your click handler, toggle the item id in the array.

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

You could also use an object or set, or even restrict only a single id, but the general approach will still be the same.