如何通过选定的道具动态地更改 vue js 2 中的选项卡？答案

【问题标题】：How to dynamically tab changes in vue js 2 by selected props?如何通过选定的道具动态地更改 vue js 2 中的选项卡？
【发布时间】：2018-04-20 22:43:41
【问题描述】：

我是 Vue JS 的新手。所以，如果有什么问题，别介意。

我正在为标签组件使用 vue-bulma-tabs 模块。我想从另一个组件动态更改选项卡。这里，是当前选定选项卡的选定道具。我想通过全局变量更改选定的道具值，以便我可以显示来自任何组件的任何选项卡。如果不是，是否有可能解决方案是什么？如果可能，请尽快回复我。

这是我当前的标签代码：

  <tabs>
    <tab name="About Us">
      <h1>This part is about us
      </h1>
    </tab>
    <tab name="About our culture">
      <h1>This part is about our culture
      </h1>
    </tab>
    <tab name="About our vision" selected="selectedTab">
      <h1>This part is about our vision
      </h1>
    </tab>
  </tabs>
  <button type="button" @click="GoTab ()">Go to tab</button>

我希望当我点击转到标签按钮时，它会转到关于我们的愿景标签。

我的 Vue Js 代码：

<script>
import TabParentComponent from 
'../../components/layout/tabParentComponent.vue'
import TabChildComponent from 
'../../components/layout/tabChildComponent.vue'
export default {
  components: {
  'tab': TabChildComponent,
  'tabs': TabParentComponent
},
data () {
  return {
    selectedTab: false
  }
},
methods: {
  GoTab () {
    this.selectedTab = true
  }
 }
}
</script>

当数据部分中的 seletedTab = true 时有效。但我想当按钮单击时它会是真的，否则会是假的。特别是，我想保留一个 vuex 存储数据。根据商店值 selectedTab 将是 true 或 false。

【问题讨论】：

这没有意义，但没关系，因为你是新人。但是为什么你在标签之外有 on GoTab 方法呢？它没有提及哪个选项卡应该处于活动状态。同样this.selectedTab 应该保存一个非布尔值，因此它也具有所选选项卡的引用......而且` 4">`是无效标签......你使您的任务复杂化
嗨，我已经更新了我的代码。如果 this.selectedTab 不持有布尔值，它会起作用吗？我正在检查这个..立即
您最好制作自己的标签，而不是使用 bulma-tab 并尝试破解。如果您坚持使用该模块，请发布一个完整的示例

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

用 vuex

看看这个version

seletedTab 是getters，可以在应用程序的任何位置使用它。 Vue Js代码：

<script>
import TabParentComponent from 
'../../components/layout/tabParentComponent.vue'
import TabChildComponent from 
'../../components/layout/tabChildComponent.vue'

import { mapGetters, mapActions } from 'vuex'

export default {
  components: {
  'tab': TabChildComponent,
  'tabs': TabParentComponent
},
computed: {...mapGetters([
  'selectedTab'
  ])
},
methods: {
  ...mapActions([
    'GoTab'
  ])
 }
}
</script>

不要忘记使用 vuex 的应用程序的结构会略有不同！见Application Structure

【讨论】：