Vue.js v-show不会与其他组件发生变化

Question

我在vue.js中有这个组件

当我按下其中一个点时，它将“选择的”更改为一个值。

然后，我将4个隐藏的组件导入到该组件中。这些具有v-show =“ selected == value”。当我按“ oplysninger”时，它现在显示此info.vue组件。它可以正常工作。

然后，我用eventbus编写了一个与settings.vue通信的发射器（其中显示了“ oplysninger”）。当我按左上角的小箭头时，它会更改我在settings.vue上的“选定”，然后关闭此选项卡。

但是它什么也没做。我尝试console.log来查看是否发射器事件返回并更改了我的设置值，并且确实更改了它。

test -> from info.vue
test2 -> from settings.vue
0 -> is the value of selected on settings.vue. 

谁能告诉我为什么我不关闭info.vue选项卡，然后再次显示导航？

代码：

SETTINGS.VUE      

this.$eventHub.$on('changeSelect', function () {
      console.log('test2')
      this.selected = 0
      console.log(this.selected)
    })

INFO.VUE

<div v-show="active == 0" class="header">
      <img class="backArrow"  @click.prevent="select()"  src="static/img/icons/backArrowSettings.svg" alt="">
      <h3 class="headline"> Oplysninger </h3>
      <a href="#" @click.prevent="">Gem</a>
    </div>

select () {
      console.log('test')
      this.$eventHub.$emit('changeSelect', 0)
    },

谢谢。