0

我（在您的帮助下）创建了一个下拉菜单，当使用 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 没有任何反应。

在此处输入图像描述

4

2 回答 2

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>

于 2022-01-07T18:27:48.740 回答
0

你应该这样做。我正在考虑你要更改的这张图片

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

于 2022-01-06T19:36:21.203 回答