vue класс переключения для выпадающего меню

Question

я хочу переключить active-submenu class на li тег, когда я нажимаю на ссылку a , чтобы показать выпадающее меню, используя VueJS, но я не не знаю, как, пожалуйста, помогите мне

<template>
  <ul>
    <li class="active-submenu">
      <a href="#">
        <i class="uil-envelope-alt"></i>
        <span>Email</span>
      </a>
      <ul>
        <li>
          <a href="email-inbox">Inbox</a>
          <a href="email-inbox-read">Email Read</a>
          <a href="email-compose">Email Compose</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">
        <i class="uil-shopping-basket"></i>
        <span>E-commerce</span>
      </a>
      <ul>
        <li>
          <a href="shop-card">Products Grid</a>
        </li>
        <li>
          <a href="shop-listing">Products List</a>
        </li>
        <li>
          <a href="shop-product">Product</a>
        </li>
      </ul>
    </li>
    </li>
  </ul>
</template>

Answer 1

Примерно так:

<template>
  <ul>
    <li :class="{'active-submenu': activeEmail}">
      <a href="#" @click.prevent="activeEmail = !activeEmail">
        <i class="uil-envelope-alt"></i>
        <span>Email</span>
      </a>
      <ul>
        <li>
          <a href="email-inbox">Inbox</a>
          <a href="email-inbox-read">Email Read</a>
          <a href="email-compose">Email Compose</a>
        </li>
      </ul>
    </li>
    <li :class="{'active-submenu': activeCommerce}">
      <a href="#" @click.prevent="activeCommerce = !activeCommerce">
        <i class="uil-shopping-basket"></i>
        <span>E-commerce</span>
      </a>
      <ul>
        <li>
          <a href="shop-card">Products Grid</a>
        </li>
        <li>
          <a href="shop-listing">Products List</a>
        </li>
        <li>
          <a href="shop-product">Product</a>
        </li>
      </ul>
    </li>
    </li>
  </ul>
</template>

<script>
export default
{
  name: 'MyCustomMenu',
  data()
  {
    return {
      activeEmail: true,
      activeCommerce: false,
    }
  }
}
</script>