Vue.js 如何在vuejs中更改选项卡标题上的图标？

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

joindre
奥努斯河
阿奎尔酒店
从“appel.png”导入appelImage
从“trouver.png”导入trouverImage
从“heure.png”导入heureImage
从“tab\u tel\u blanc.png”导入标签
从“tab_geo_blanc.png”导入tab_geoo
从“tab_heure_blanc.png”导入tab_heree
导出默认值{
数据（）{
返回{
电话：''，
tab_geo:“”，
制表符：“”
}
},
方法：{
检查图（选项卡索引）{
如果（制表符索引===0）{
this.tab\u tel=tab\u tell
this.tab_geo=trouvrimage
this.tab_heure=heureImage
}
如果（制表符索引===1）{
this.tab_tel=appelImage
this.tab\u geo=tab\u geo
this.tab_heure=heureImage
}
}
}
}

---

谢谢你的帮助

发生您的问题是因为缺少数据

这是因为您正在为

tab\u tel

、

tab\u geo

和

tab\u heure

变量创建新属性。这是一个问题，因为这样vue就不会注意到它们是否发生了更改，而GUI中这些变量的任何更改基本上都是实际更改的“副作用”

声明数据中有问题的变量：

data（）{
返回{
电话：''，
tab_geo:“”，
tab_heure:“”，
}
},

很抱歉，我忘了将属性放在数据上。我刚刚更新了我的代码，但它不起作用。你确认你的网页配置正确吗？当代码执行时，

…Image

变量设置为什么？对不起，我不理解你的问题