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

您可以保留您拥有的链接对象，并处理每个项目的点击。 E.g。

data() {
  return {
    links: [
      {
        title    : 'Portfolio',
        to       : '/portfolio',
        isActive : false,
        location : 'first',
      },
      {
        title    : 'Stocks',
        to       : '/stocks',
        isActive : false,
        location : 'first',
      },
      {
        title    : 'End Day',
        to       : '#',
        isActive : false,
        location : 'second',
      },
      {
        title    : 'Save / Load',
        to       : '#',
        isActive : false,
        location : 'second',
      },
    ]
  };
},
methods: {
  handleNavClick(item) {
    this.links.forEach(el, () => {
      el.isActive = false;
    });

    item.isActive = true;
  }
},

Answer 2

您需要为每个可点击项目设置某种标识符，并将其设置为您的data媒体资源。例如

data() {
  return { active: null }
}

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

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

在此示例中，标识符为＆＃34; portfolio＆＃34; 但这可以是任何内容，只要您为每个项目使用唯一值。

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

2 个答案: