Question

我是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。

Answer 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

如何通过选定的道具动态标记vue js 2中的更改？

1 个答案: