VueJs设置活动类，当使用V-for循环在下拉列表中单击One-li元素时

Question

我不知道如何在下拉选项中设置活动类，使用v-for循环，其中一个选项默认为粗体。单击其他选项时，活动类应添加到其他选项中，使单击的选项变为粗体，反之亦然。

<div id="jobAid-menu" class="dropdown-content" v-if="openTypeView"> 
<ul> 
<li class="type-li-item" v-for="item in help" :id="item.liId" :key="item.id" :class="item.class"  @click="changeHelpType(item)">
<span>{{ item.name }}</span>
</li>  
</ul>
</div>

下面是我的JS代码，

data(){
openTypeView: false,
active_id: 1,
help: [

{
name: "Users",
id: 1,
liId: 'g1',
class: 'active',
},
{
name: "Profile",
id: 2,
liId: 'g2',
class: '',
},
],
},
methods:{
changeHelpType:function(item){
if(this.active_id===item.id){
this.help.find(item => item.id === this.active_id).class='';
this.help.find(item => item.id===id).class='active' ;
this.active_id =id;
}
}
}

CSS样式

li {
font-weight:normal;
}
li.active {
font-weight:bolder;
}

现在默认情况下，帮助数组中的第一个对象处于活动状态。如果我点击下拉列表中的其他li元素，它应该变为活动的，所有其他li元素都应该失去活动类。你能帮我做这件事吗。我是VueJS的新手，如果有错误，请忽略。

Answer 1

首先，您的数据选项应该是一个返回对象的函数，其次使用基于help属性的计算属性来添加class字段：

data(){
return{
openTypeView: false,
active_id: 1,
help: [

{
name: "Users",
id: 1,
liId: 'g1',
class: 'active',
},
{
name: "Profile",
id: 2,
liId: 'g2',
class: '',
},
],
}
},
computed:{
customHelp(){
return this.help.map(item=>{
item.class= this.active_id===item.id?'active':''
return item;
})
}
}

然后循环通过计算出的属性：

<li class="type-li-item" v-for="item in customHelp" :id="item.liId" 
:key="item.id" :class="item.class"  @click="active_id=item.id">
<span>{{ item.name }}</span>
</li>