How to change one image when I click in dropdown with VueJS and TailwindCSS

Question

I created (with your help) one dropdown that change text when are clicked with Vue, but I want that image appears too, but my code don't work, I've tried this:

<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
      };
    },

The text changes normally, but nothing happens with the img.

Faisal Nadeem · Answer 1 · 2022-01-07T19:41:14.523

Do this with this portion of the code. You have to use selectedLang in v-if condition instead of 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>

Nop, When I use this code The img dissapear in the dropdown and only has show hen i click in the language — GuilhermeBS, Jan 07 '22 at 18:40
On which line you want to show the image in the code you shared? — Faisal Nadeem, Jan 07 '22 at 18:47
In dropdown on nav bar, not in inside dropdown, like img + language in navbar — GuilhermeBS, Jan 07 '22 at 19:25
then use this v-if condition with image tags in the navbar. Like Above edited code — Faisal Nadeem, Jan 07 '22 at 19:38

score 0 · Answer 2 · answered Jan 06 '22 at 19:36

You should do like this.I'm considering this image you want to change

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

Check below

<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
      };
    },

Just apply v-if="selectedLang='French'" on the img tag

Nothing happens, when I use v-if the code don't show the img, and the dropdown bug — GuilhermeBS, Jan 07 '22 at 16:14
is it possible for you to share the complete code so that i can guide you in a better way — Faisal Nadeem, Jan 07 '22 at 17:58
ok, that's the code: https://codepen.io/GuilhermeBS/pen/Exwpdaw — GuilhermeBS, Jan 07 '22 at 18:05

How to change one image when I click in dropdown with VueJS and TailwindCSS

2 Answers2