How to use custom values?

[moonlik]

Now to use this component I need to something like this:

<tabs v-on:tab-selected="changeTab" animation="slide" :only-fade="false">
  <tab-pane label="Day">Day Tab</tab-pane>
  <tab-pane label="Month">Month Tab</tab-pane>
  <tab-pane label="Year">Year Tab</tab-pane>
</tabs>

methods: {
  changeTab: function (tabNumber) {
    switch (tabNumber) {
      case 0:
        this.periodType = 'day'
        break

      case 1:
        this.periodType = 'month'
        break

      case 2:
        this.periodType = 'year'
        break

      default:
        this.periodType = 'day'
    }
  }
},

Is there any more convenient and flexible method to do it? For example, something like this:

<tabs v-model="periodType" animation="slide" :only-fade="false">
  <tab-pane label="Day" value="day">Day Tab</tab-pane>
  <tab-pane label="Month" value="month">Month Tab</tab-pane>
  <tab-pane label="Year" value="year">Year Tab</tab-pane>
</tabs>

i think, if you use: .
you can try. But i dont know if it will work.