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