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

您的问题正在发生，因为数据中缺少"reactivity"。

之所以发生这种情况，是因为您正在为tab_tel，tab_geo和tab_heure变量创建新属性。这是一个问题，因为这样vue不会注意到它们是否被更改，并且您的GUI中这些变量的任何更改基本上都是实际更改的“副作用”。

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

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

如何在vuejs中更改标签标题上的图标？

1 个答案: