<vs-tab> 'value' prop does not seem to work

[sdwru]

Vuesax v3.

<vs-tabs v-model="tabIndex">
        <vs-tab>
            {{ tabIndex }}
        </vs-tab>
        <vs-tab>
            {{ tabIndex }}
        </vs-tab>
    </vs-tabs>

<script>
  data() {
   tabIndex: 0
  }

Switching between the 2 tabs the value of {{ tabIndex }} is either 0 or 1. I want it to be, for example, A or B. According to the documentation I should be able to do this.

<vs-tabs v-model="tabIndex" :value="valuex">
        <vs-tab @click="valuex='A'">
            {{ tabIndex }}
        </vs-tab>
        <vs-tab @click="valueX='B'">
            {{ tabIndex }}
        </vs-tab>
    </vs-tabs>

<script>
  data() {
   tabIndex: 0
   valuex: 'A'
  }

But that does not work.

I also tried this

<vs-tabs v-model="tabIndex">
        <vs-tab value="A">
            {{ tabIndex }}
        </vs-tab>
        <vs-tab value="B">
            {{ tabIndex }}
        </vs-tab>
    </vs-tabs>

There are no examples so I am just sort of trying to guess what the correct syntax is. value is a prop so I am trying to use it like any other prop but so far no luck.

[Muhammad-Muneeb-Zafar]

Having same issue. Can anyone help please ?

[andyslack]

This works for me:

<vs-tabs v-model="tabs">
            <vs-tab label="General" icon="important_devices" value="0">
               Tab1
       </vs-tab>
            <vs-tab label="Avatar" icon="important_devices" value="1">
               Tab2
            </vs-tab>
        </vs-tabs>

With the data property

 data: () => ({
        tabs: 0
    })

I am them using the URL route to change the tabs... e.g.

settings/:tab

 created: function (){
        switch(this.$route.params.tab){
            case 'avatar':
              this.tabs = 1
              break
        }

    },

Hope this helps someone.