當在 V-for 循環中單擊一個 li 元素時，VueJs 將活動類設置為來自 API 的數據

Question

我需要將活動類設置為來自 API 的眾多選項之一。 此外，第一個選項首先處於活動狀態，當用戶單擊時，它必須切換。 以下是我的模板：

<div @click="showTimezone">
        <span>{{defaultCountry}}</span>
    </div>
<div  id="timezone-menu" class="timezone-menu" v-show="showTimezone">
          <ul >
            <li class="country-menu-item" v-for="item in Options" :id="item.id" :key="item.abbrevation" @click="selectCountry(item)">
                {{ item.optionText }}
            </li>
          </ul>    
        </div>

我將 API 中的數據存儲在 Options 數組中。

data() {
     return {
        defaultCountry: "CST",
        Options: [],
    }
   }

在下拉菜單中，CST 默認為粗體。 單擊其他選項時，它應該會丟失其樣式類並添加到用戶單擊的其他選項中。 請幫助我了解如何執行此操作。 如果需要，將提供其他詳細信息。

Answer 1

將名為activeId屬性添加到您的數據對象並在selectCountry方法中更新它：

data() {
     return {
       defaultCountry: "CST",
       Options: [],
       activeId:-1
    }
    },
methods:{
  selectCountry(item){
    ...
    this.activeId=item.id;
  
  }
}

在模板中添加類綁定：

<li class="country-menu-item" :class="{'active':item.id===activeId}" v-for="item in Options"