在列表菜单项上切换活动类 - vue js

Question

我希望，单击菜单项，活动类仅针对该特定项目触发并为其他项目删除，直到现在我写了这个：

<template>
  <nav class="navbar">
    <div class="navbar__brand">
      <router-link to="/">Stock Trader</router-link>
    </div>
    <div class="navbar__menu">
      <ul class="navbar__menu--list">
        <li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}">
          <router-link to="/portfolio">Portfolio</router-link>
        </li>
        <li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}">
          <router-link to="/stocks">Stocks</router-link>
        </li>
      </ul>
    </div>
    <div class="navbar__menu--second">
      <ul class="navbar__menu--list">
        <li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}">
          <a href="#">End Day</a>
        </li>
        <li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}">
          <a href="#">Save / Load</a>
        </li>
      </ul>
    </div>
  </nav>
</template>
<script>

    export default {
      data(){
        return{
          isActive: false

        }
      }
    }
</script>

当然，现在，当我单击一个项目时，会为所有项目插入/删除活动类，只有单击特定项目才能接收活动类的最佳解决方案是什么？

Answer 1

您需要为每个可点击项目使用某种标识符并将其设置为您的data属性。例如

data() {
  return { active: null }
}

并在您的列表项中（例如）

<li @click="active = 'portfolio'"
    class="navbar__menu--item" 
    :class="{active:active === 'portfolio'}">

在这个例子中，标识符是“portfolio”，但它可以是任何东西，只要你为每个项目使用一个唯一的值。