首页 文章

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

提问于
浏览 次
1

我是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商店数据 . 根据商店 Value ，selectedTab将为true或false .

vue.js vuejs2 vue-component vuex

1 回答

  • 0

    看_1131157_与 vuex

    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>

    Do not forget that the structure of the application with vuex will be slightly different! See Application Structure

    回复于

相关问题