当在 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"