当我使用 VueJS 和 TailwindCSS 点击下拉菜单时如何更改一张图片答案

【问题标题】：How to change one image when I click in dropdown with VueJS and TailwindCSS当我使用 VueJS 和 TailwindCSS 点击下拉菜单时如何更改一张图片
【发布时间】：2022-01-06 18:05:17
【问题描述】：

我（在您的帮助下）创建了一个下拉菜单，当使用 Vue 单击时会更改文本，但我希望该图像也出现，但我的代码不起作用，我已经尝试过：

<div class="relative">
      <!-- Dropdown toggle button -->
      <button
        @click="show = !show"
        class="flex items-center text-gray-500 rounded-md"
      >
        <span class="inline-flex">
          {{selectedImg??''}}
          {{selectedLang??'English'}}</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="selectedLang='English'"
          class="
            inline-flex  w-full px-4 py-2 text-sm text-gray-500
            hover:bg-indigo-100 hover:text-indigo-600 
          "
        >
        <img src="../Assets/Img/en.png" alt="" class="w-6 h-4 mr-2" @click="selectedImg='English'">
          English
        </router-link>
        <router-link
          to="/"
          @click="selectedLang='French'"
          class="
            inline-flex w-full px-4 py-2
            text-sm text-gray-500 hover:bg-indigo-100 hover:text-indigo-600
          "
        >

-----------------------

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

文字正常变化，但img没有任何反应。

【问题讨论】：

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

【解决方案1】：

使用这部分代码执行此操作。您必须在 v-if 条件下使用 selectedLang 而不是 selectedImg

                                                                     <template #trigger>
                                    <span class="inline-flex rounded-md">
                                        <img src="../Assets/Img/en.png" alt="" class="w-6 h-4 mr-2" v-if="selectedLang === 'English'">
                                        <img src="../Assets/Img/fr.png" alt="" class="w-6 h-4 mr-2" v-if="selectedLang === 'French'">
                                        <img src="../Assets/Img/de.png" alt="" class="w-6 h-4 mr-2" v-if="selectedLang === 'German'">
                                        <img src="../Assets/Img/pt.png" alt="" class="w-6 h-4 mr-2" v-if="selectedLang ==='Portuguese'">
                                        <button type="button" class="inline-flex items-center border border-transparent text-md leading-4 rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">                                         
                                            <span>{{selectedLang??'English'}}</span>
                                        </button>
                                    </span>
                                </template>

【讨论】：

不，当我使用此代码时，img 在下拉列表中消失，只有当我点击该语言时才显示
您希望在共享代码中的哪一行显示图像？
在导航栏的下拉菜单中，而不是在下拉菜单中，比如导航栏中的 img + 语言
然后将此 v-if 条件与导航栏中的图像标签一起使用。像上面编辑的代码

【解决方案2】：

您应该这样做。我正在考虑您要更改此图像

    <img src="../Assets/Img/en.png" alt="" class="w-6 h-4 mr-2" v="selectedImg='English'">

查看下方

<div class="relative">
      <!-- Dropdown toggle button -->
      <button
        @click="show = !show"
        class="flex items-center text-gray-500 rounded-md"
      >
        <span class="inline-flex">
          {{selectedImg??''}}
          {{selectedLang??'English'}}</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="selectedLang='English'"
          class="
            inline-flex  w-full px-4 py-2 text-sm text-gray-500
            hover:bg-indigo-100 hover:text-indigo-600 
          "
        >
        <img src="../Assets/Img/en.png" alt="" class="w-6 h-4 mr-2" v-if="selectedLang='English'">
          English
        </router-link>
        <router-link
          to="/"
          @click="selectedLang='French'"
          class="
            inline-flex w-full px-4 py-2
            text-sm text-gray-500 hover:bg-indigo-100 hover:text-indigo-600
          "
        >
        <img src="../Assets/Img/fr.png" alt="" class="w-6 h-4 mr-2" v-if="selectedLang='French'"

-----------------------

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

只需在 img 标签上应用 v-if="selectedLang='French'"

【讨论】：

当我使用 v-if 代码没有显示 img 和下拉错误时，什么都没有发生
能不能把完整的代码分享给我，让我更好的指导你
好的，这是代码：codepen.io/GuilhermeBS/pen/Exwpdaw