VueJs 設置活動類，當使用 V-for 循環在下拉列表中單擊一個 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>