单击Vuejs +尾风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

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

Answer 1

在@click中使用selectedLang not selected lang，不要使用@click.native，只有单击才能工作

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