Vuejs: How to display selected <li> element in ul dropdown menu

Question

I've created a simple dropdown menu using ul and li elements. I used a for loop to dynamically generate the li elements. I have a class called nav-is-visible that will display the li elements when the user clicks on the dropdown menu. However, I do not know how to display the currently selected value. Here's my code:

Update: I've added a codepen link https://codepen.io/Issaki/pen/OYxbJV

Update: I am still trying to solve this issue, can anyone help me?

  <template>   
  <div>
    <nav :class="{'nav-is-visible' : displayCategory}">
      <ul>
        <li v-for="item in items" :key="item.id" @click="displayCategory = !displayCategory">
          <p>{{item.name}}</p>
        </li>
      </ul>
    </nav>
  </div>
</template>


<script>
export default {
  data() {
    return {
      displayCategory: false,
      items: [
        {
          id: 1,
          name: "Basketball"
        },
        {
          id: 2,
          name: "Soccerr"
        }
      ]
    };
  },

  methods: {
  },
  computed: {}
};
</script>

<style>
nav {
  width: 100%;
  top: 90px;
  left: 0;
  z-index: 3;
  height: 45px;
  line-height: 45px;
  vertical-align: middle;
  display: inline-block;
  font-size: 0.1px;
  font-weight: 300;
  font-style: normal;
  cursor: pointer;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -webkit-transition: opacity 0.25s ease-in-out;
}

/* Create the bordera and the surrounding */
nav ul {
  height: 45px;
  padding: 0 10px;
  text-align: left;
  border: 1px solid #33383b;
  background: #fafafa;
  border-radius: 3px;
}

nav ul li {
  display: block;
  position: relative;
}

nav ul li:first-child:before {
  position: absolute;
  content: " Menu ";
  position: relative;
  font-size: 1.6rem;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}
nav ul li:first-child:after {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  font-size: 1.2rem;
  content: "\f0d7";
  color: #2267b9;
  padding-right: 10px;
}

/* Hide the li elements */
nav p {
  display: none;
  font-size: 1.5rem;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
  color: #4a5564;
}

#category-btn {
  display: none;
}

.category-input {
  display: none;
}

nav.nav-is-visible ul {
  height: initial;
  background: #f1f1f1;
}

nav.nav-is-visible ul li:first-child:after {
  content: "\f00d";
}
nav.nav-is-visible ul li p {
  display: block;
  border-bottom: 2px solid #f1f1f1;
}
nav.nav-is-visible ul li p:hover {
  border-bottom: 2px solid #4a5564;
}
nav.nav-is-visible ul li:last-child {
  margin-bottom: 10px;
}

/* Make button visible again when nav-is-visible class is toggled */
nav.nav-is-visible #category-btn {
  display: block;
}
</style>

Answer 1

It's needed to:

• save on which item you clicked.
• add on the li a conditionnal class based on equality of selectedId and item id.

<template>
    <div>
        <nav :class="{'nav-is-visible' : displayCategory}">
            <ul>
                <li v-for="item in items" :key="item.id" @click="select(item.id)" :class="selectedId === item.id ? 'my-selected-item-class':null">
                    <p>{{item.name}}</p>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                selectedId : null,
                displayCategory: false,
                items: [{id: 1,name: "Basketball"},{id: 2,name: "Soccerr"}]
            };
        },
        methods: {
            select(itemId){
                this.selectedId = itemId
                this.displayCategory = !this.displayCategory
            }
        }
    };
</script>