CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Bill
Bill

Reputation: 1477

Enable v-tabs that were set disabled in Vue and Vuetify?

I have the following code for a v-tabs control:

</v-tabs>
  <v-tab
    disabled
    v-for="tab of tabs"
    :key="tab.index"
    v-on:change="tabSelected(tab.index)">
    {{tab.name}}
  </v-tab>
</v-tabs>

The tabs are disabled when the app starts. They are disabled until the user selects an item that will fill the tabs with data. Once the data is displayed the tabs need to become active. I would like to add code to a button click that gets the data and will also allow the tab to become active.

Upvotes: 3

Views: 6361

Answers (1)

Bill
Bill

Reputation: 1477

Got it- I added binding to disabled

           <v-tab
            :disabled="isDisabled"
            v-for="tab of tabs"
            :key="tab.index"
            v-on:change="tabSelected(tab.index)"
          >{{tab.name}}</v-tab>
        </v-tabs>

Then on the button click 

       this.isDisabled = false;

Upvotes: 4

Related Questions