单击 Vuejs + Tailwind CSS 时如何更改下拉列表答案

【问题标题】：How to change a dropdown when click Vuejs + Tailwind CSS单击 Vuejs + Tailwind CSS 时如何更改下拉列表
【发布时间】：2022-01-05 17:03:30
【问题描述】：

我想做一个下拉菜单，当我点击一个项目时，下拉菜单会发生变化，但我不知道如何做到这一点，我对此一无所知。那是我的代码：

<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

【问题讨论】：

标签： css vue.js vuejs3 tailwind-css laravel-breeze

【解决方案1】：

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

【讨论】：

【解决方案2】：

添加另一个名为 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>

【讨论】：

不推荐使用 'v-on' 指令上的 @click '.native' 修饰符后的 .native
obs：我也想要下拉菜单中的img，我该怎么办？