单击 Vuejs + Tailwind CSS 时如何更改下拉菜单

Question

我想做一个下拉菜单，当我点击一个项目时，下拉菜单会发生变化，但我不知道如何做，而且我什么也没找到。那是我的代码：

<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>

那就是我所做的：
https://i.stack.imgur.com/UcKl7.png

还有我想要的 enter image description here

Answer 1

添加另一个名为 selectedLang 的属性并在您单击其中一种语言时更新它：

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

为模板添加每个语言项目的 @click.native="selectedLang='theCurrentLanguage'" :

   <!-- 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>

Answer 2

在@click 中使用selectedLang 而不是selected lang 并且不使用@click.native，只有单击才有效

单击 Vuejs + Tailwind CSS 时如何更改下拉菜单

How to change a dropdown when click Vuejs + Tailwind CSS

css

vue.js

tailwind-css

vuejs3

laravel-breeze