如何在点击时更改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>

我想要的是，在这里输入图像描述

- GuilhermeBS

Answer 1

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

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

为了模板添加每个语言项的 @click.native="selectedLang='当前语言'" ：

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

- Boussadjra Brahim

---

@click指令后的'.native'修饰符已经被弃用。 - GuilhermeBS

我想在下拉菜单中添加图片，我应该怎么做？ - GuilhermeBS

Answer 2

在 @click 中使用 selectedLang 而不是 selected lang，不要使用 @click.native，只有 click 才能生效。

- Guilherme Beserra