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

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 >
      <!-- Dropdown toggle button -->
      <button
        @click="show = !show"
        
      >
        <span >
          {{selectedImg??''}}
          {{selectedLang??'English'}}</span>
      </button>

      <!-- Dropdown menu -->
      <div
        v-show="show"
        
      >
        <router-link
          to="/"
          @click="selectedLang='English'"
          
        >
        <img src="../Assets/Img/en.png" alt=""  @click="selectedImg='English'">
          English
        </router-link>
        <router-link
          to="/"
          @click="selectedLang='French'"
          
        >

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

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

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

CodePudding user response：

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

    <img src="../Assets/Img/en.png" alt=""  v="selectedImg='English'">

Check below

<div >
      <!-- Dropdown toggle button -->
      <button
        @click="show = !show"
        
      >
        <span >
          {{selectedImg??''}}
          {{selectedLang??'English'}}</span>
      </button>

      <!-- Dropdown menu -->
      <div
        v-show="show"
        
      >
        <router-link
          to="/"
          @click="selectedLang='English'"
          
        >
        <img src="../Assets/Img/en.png" alt=""  v-if="selectedLang='English'">
          English
        </router-link>
        <router-link
          to="/"
          @click="selectedLang='French'"
          
        >
        <img src="../Assets/Img/fr.png" alt=""  v-if="selectedLang='French'"

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

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

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

CodePudding user response：

Do this with this portion of the code. You have to use selectedLang in v-if condition instead of selectedImg

                                                                     <template #trigger>
                                    <span >
                                        <img src="../Assets/Img/en.png" alt=""  v-if="selectedLang === 'English'">
                                        <img src="../Assets/Img/fr.png" alt=""  v-if="selectedLang === 'French'">
                                        <img src="../Assets/Img/de.png" alt=""  v-if="selectedLang === 'German'">
                                        <img src="../Assets/Img/pt.png" alt=""  v-if="selectedLang ==='Portuguese'">
                                        <button type="button" >                                         
                                            <span>{{selectedLang??'English'}}</span>
                                        </button>
                                    </span>
                                </template>