Vuejs: How to allocate a function after clicking to some elements separately?

Question

The problem is that when I click on one li the other li is selected and gets border. I want to work separately!

    <!-- navbar -->

    <nav class="nav navbar-expand-lg main-nav d-flex">

        <h1 class="text-center fs-2">دفتر ترجمه رسمی پروند</h1>

        <ul class="my-auto mx-auto main-ul">

            <li>
                <router-link class="link" to="/">
                    خانه
                </router-link>
            </li>

            <li @click="activeMe" :class="[isActive ? 'list-border' : '']">
                <router-link class="link" to="/tranlsation-services">
                    خدمات ترجمه
                </router-link>
            </li>

            <li @click="activeMe" :class="[isActive ? 'list-border' : '']">
                <router-link class="link" to="/translation-tariffs">
                    تعرفه ترجمه
                </router-link>
            </li>

Blockquote

 data() {

    return {
        mobileNav: false,
        isActive: false,
    }
},
methods: {
     activeMe() {
        if (!this.isActive) {
        this.isActive = !this.isActive
        }
    },
    handleView() {
        this.mobileNav = true;
    },
    handleView2() {
        this.mobileNav = false;
    },
},
computed: {
    }
},
created() {
    window.addEventListener("resize", this.handleView);
    window.addEventListener("resize", this.handleView2);
},
mounted() {
},

Blockquote

.list-border 
    border-bottom: 4px solid white !important;
}`enter code here`

As you can see a borderenter code herebottom is added in the below of image after clicking on image section, I want something like this !

Answer 1

NavBar Toggle VueJs

---

I suggest you this method

• i use a loop to minimize code.
• with the v-for key attribute, i can keep on track on the current item in the loop and change his active property.
• on click, i first deselect all items and after change the active attribute of the selected item.

=======

<template>
  <div class="hello">
    <h3>Ecosystem</h3>
    <ul>
      <li
        v-for="item in menuList"
        :key="item"
        @click.stop="
          deselectAll();
          item.active = !item.active;
        "
        :class="{ 'list-border': item.active }"
      >
        <RouterLink class="link" :to="item.to">{{ item.label }}</RouterLink>
      </li>
    </ul>
  </div>
</template>

<script>
  import RouterLink from "vue-router";

  export default {
    components: {
      RouterLink,
    },
    name: "HelloWorld",
    data: () => {
      return {
        menuList: [{
            to: "https://router.vuejs.org",
            label: "vue-router",
            active: false,
          },
          {
            to: "https://vuex.vuejs.org",
            label: "vuex",
            active: false,
          },
          {
            to: "https://github.com/vuejs/vue-devtools#vue-devtools",
            label: "vue-devtools",
            active: false,
          },
          {
            to: "https://vue-loader.vuejs.org",
            label: "vue-loader",
            active: false,
          },
          {
            to: "https://github.com/vuejs/awesome-vue",
            label: "awesome-vue",
            active: false,
          },
        ],
      };
    },
    methods: {
      deselectAll() {
        this.menuList.map((i) => (i.active = false));
      },
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h3 {
    margin: 40px 0 0;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
  }
  
  li {
    display: inline-block;
    margin: 0 10px;
  }
  
  a {
    color: #42b983;
  }
  
  .list-border {
    border-bottom: 4px solid red !important;
  }
</style>

You can try it here on sanbox