как поменять иконку на вкладках заголовков в вуэйс?

Question

У меня есть вкладки в VueJS. Я хочу изменить значки в заголовке вкладок, как только я нажму на одну из вкладок. Я не могу получить хорошие иконки только после двух манипуляций. В функции changeMap я получаю хорошие иконки с console.log (), но никаких изменений в реальном. Это мой код:

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

Спасибо за вашу помощь!

Answer 1

Ваша проблема возникает из-за "реактивности" для данных отсутствует.

Это происходит потому, что вы создаете новые свойства для переменных tab_tel, tab_geo и tab_heure. Это проблема, потому что этот способ vue не замечает, если они изменены, и любое изменение в вашем GUI в этих переменных в основном является «побочным эффектом» реального изменения.

Объявите проблемные переменные в ваших данных:

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