How to dynamically tab changes in vue js 2 by selected props?

Question

I am new in Vue JS. So, if anything wrong never mind.

I am using vue-bulma-tabs module for tabs component. I want to change the tabs dynamically from another component. Here, is a selected props for the currently selected tab. I want to change the selected props value by global variable so that I can show any tab from any component.Is it possible if not what is the solution? If possible, please answer me as soon as possible.

Here is my current tabs code:

  <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>

I want when I click Go to tab button then it will go to About our vision tab.

My Vue Js code:

<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>

It works when seletedTab = true in data section. But I want to when button click it will be true otherwise false. Especially, I want to keep a vuex store data. Depending on store value selectedTab will be true or false.

This makes no sense, but it's okay since you are new. But why do you have on GoTab method outside of your tabs? It has no reference to which tab should be active or not. Also this.selectedTab should hold a value not boolean so it too has a reference of the selected a tab ... also ` <tab name="About Us"> 4</span>">` is invalid tag ... you are complicating your task — samayo
Hi, I have been updated my code. If this.selectedTab hold not boolean value will it work? I am checking this..imediately — Sukanta Bala
you are better of making your own tabs instead of using bulma-tab and try to hack. If you insist in using the module then post a complete example — samayo

Volodymyr Symonenko Volodymyr Symonenko · Accepted Answer · 2017-11-10T12:28:51

look this version with vuex

seletedTab is a getters, use it anywhere in the app. Vue Js code:

<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

How to dynamically tab changes in vue js 2 by selected props?

1 Answers