How to change a dropdown when click Vuejs + Tailwind CSS

Question

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 class="relative">
      <!-- Dropdown toggle button -->
      <button
        @click="show = !show"
        class="flex items-center text-gray-500 rounded-md"
      >
        <span class="">Language</span>
      </button>

      <!-- Dropdown menu -->
      <div
        v-show="show"
        class="
          absolute  right-0   py-2  mt-5
          rounded-md shadow-xl w-36 bg-white
          
        "
      >
        <router-link
          to="/"
          class="
            inline-flex
            w-full px-4 py-2
            text-sm text-gray-500
            hover:bg-indigo-200 hover:text-indigo-600 
          "
        >
        <img src="../Assets/Img/en.png" alt="" class="w-6 h-4 mr-2">
          English
        </router-link>
        <router-link
          to="/"
          class="
            inline-flex w-full px-4 py-2
            text-sm text-gray-500
            hover:bg-indigo-200 hover:text-indigo-600
          "
        >
        <img src="../Assets/Img/fr.png" alt="" class="w-6 h-4 mr-2">
          French
        </router-link>
        <router-link
          to="/"
          class="
            inline-flex w-full px-4 py-2 text-sm text-gray-500
            hover:bg-indigo-200 hover:text-indigo-600
          "
        >
        <img src="../Assets/Img/de.png" alt="" class="w-6 h-4 mr-2">
          German
        </router-link>
        <router-link
          to="/"
          class="
            inline-flex w-full px-4 py-2 text-sm text-gray-500
            hover:bg-indigo-200 hover:text-indigo-600
          "
        >
        <img src="../Assets/Img/pt.png" alt="" class="w-6 h-4 mr-2">
          Portuguese
        </router-link>
      </div>
    </div>

That what I do:
https://i.sstatic.net/UcKl7.png

And what I want enter image description here

Guilherme Beserra · Accepted Answer · 2022-01-06 18:55:26Z

1

Use selectedLang not selected lang in @click and do not use @click.native, only click will work

answered Jan 6, 2022 at 18:55

Guilherme Beserra

5651 gold badge6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boussadjra Brahim · Accepted Answer · 2022-01-05 18:26:28Z

1

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"
        class="flex items-center text-gray-500 rounded-md"
      >
        
        <span class="" >{{selectedLang??'Language'}}</span>
      </button>

      <!-- Dropdown menu -->
      <div
        v-show="show"
        class="
          absolute  right-0   py-2  mt-5
          rounded-md shadow-xl w-36 bg-white
          
        "
      >
        <router-link
          to="/"
         @click.native="selectedlang='English'"
          class="
            inline-flex
            w-full px-4 py-2
            text-sm text-gray-500
            hover:bg-indigo-200 hover:text-indigo-600 
          "
        >
        <img src="../Assets/Img/en.png" alt="" class="w-6 h-4 mr-2">
          English
        </router-link>

edited Jan 5, 2022 at 18:26

answered Jan 5, 2022 at 18:20

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

2 Comments

GuilhermeBS Over a year ago

the .native after @click '.native' modifier on 'v-on'directive is deprecated

GuilhermeBS Over a year ago

obs: i want the img in the dropdown too, what I should do?

Collectives™ on Stack Overflow

How to change a dropdown when click Vuejs + Tailwind CSS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related