CODEWITHSUNDEEP
vue.jsvuejs2
Y.Coding
Y.Coding

Reputation: 109

how to change icon on tabs titles in vuejs?

I have Tabs in VueJS. I want to change the icons in the tabs title once I click on one of the tabs. I can't get the good icons only after two manipulations. In the function changeMap, I get the good icons with console.log() but no changes in the real. This is my code:

<b-tabs @input="checkMap">
    <b-tab  active>
        <template slot="title">
          <b-img :src="tab_tel"/>
          <span class="tab__img__mobile"> joindre</span>
        </template>
        <div class="tab-content-active" >
        </div>
    </b-tab>
    <b-tab>
        <template slot="title">
            <b-img :src="tab_geo" class="icon__mobile"/>
            <span class="tab__img__mobile">Où nous trouver</span>
        </template>
        <div class="tab-content-active" >
        </div>
    </b-tab>
    <b-tab>
        <template slot="title">
            <b-img :src="tab_heure" class="icon__mobile"/>
            <span class="tab__img__mobile">A quelle heure</span>
        </template>
        <div class="tab-content-active" >
        </div>
    </b-tab>
</b-tabs>

import appelImage from "appel.png"
import trouverImage from "trouver.png"
import heureImage from "heure.png"
import tab_tell from "tab_tel_blanc.png"
import tab_geoo from "tab_geo_blanc.png"
import tab_heuree from "tab_heure_blanc.png"

export default {
  data() {
    return {
      tab_tel: '',
      tab_geo: '',
      tab_heure: ''
    }
  },
  methods: {
   checkMap(tab_index) {
     if(tab_index === 0) {
        this.tab_tel =  tab_tell
        this.tab_geo =  trouverImage
        this.tab_heure =  heureImage
     }
     if (tab_index === 1) {
        this.tab_tel =  appelImage
        this.tab_geo =  tab_geoo
        this.tab_heure =  heureImage
     }
   }
  }
}

Thank you for your help!

Upvotes: 0

Views: 1060

Answers (1)

Ferrybig
Ferrybig

Reputation: 18834

Your issue is happening because "reactivity" is missing for the data.

This is happening because you are creating new properties for the tab_tel, tab_geo and tab_heure variables. This is an issue because this way vue does not notice if they are changed, and any change in your GUI in those variables are basically "side-effects" of the real change.

Declare the problematic variables in your data:

data() {
  return {
    tab_tel: '',
    tab_geo: '',
    tab_heure: '',
  }
},

Upvotes: 1

Related Questions