How to change a dropdown when click Vuejs Tailwind CSS-CodePudding

I want to do a dropdown that when I click in one item the dropdown change, but I don't have ideia to how to do that and I don't find nothing about this. That's my code:

<div>
    <div >
      <!-- Dropdown toggle button -->
      <button
        @click="show = !show"
        
      >
        <span >Language</span>
      </button>

      <!-- Dropdown menu -->
      <div
        v-show="show"
        
      >
        <router-link
          to="/"
          
        >
        <img src="../Assets/Img/en.png" alt="" >
          English
        </router-link>
        <router-link
          to="/"
          
        >
        <img src="../Assets/Img/fr.png" alt="" >
          French
        </router-link>
        <router-link
          to="/"
          
        >
        <img src="../Assets/Img/de.png" alt="" >
          German
        </router-link>
        <router-link
          to="/"
          
        >
        <img src="../Assets/Img/pt.png" alt="" >
          Portuguese
        </router-link>
      </div>
    </div>

That what I do:
https://i.stack.imgur.com/UcKl7.png

And what I want enter image description here

CodePudding user response：

Add another property called selectedLang and update it when you click on one of the languages :

data(){
 return{
    show:false,
    selectedLang:null
   }
}

for the template add the @click.native="selectedLang='theCurrentLanguage'" for each language item :

   <!-- Dropdown toggle button -->
      <button
        @click="show = !show"
        
      >
        
        <span  >{{selectedLang??'Language'}}</span>
      </button>

      <!-- Dropdown menu -->
      <div
        v-show="show"
        
      >
        <router-link
          to="/"
         @click.native="selectedlang='English'"
          
        >
        <img src="../Assets/Img/en.png" alt="" >
          English
        </router-link>