CODEWITHSUNDEEP
javascriptvue.js
kylas
kylas

Reputation: 1455

How to enable button A on button click of button B in VueJS?

Abc.vue 

     <v-flex xs12 sm6>
            <v-btn class="changeNumberBtn" disabled @click="changeNumber()">Change Number</v-btn>
          </v-flex>

<v-btn round block color="blue darken-3" dark large @click="generateCode">Continue</v-btn>

Currently Change Number button is disabled. How can I enable Change Number button when I click on Continue button ?

Upvotes: 1

Views: 752

Answers (3)

Vucko
Vucko

Reputation: 20834

What is generateCode? If it has some logic, just toggle some bool value to it, like:

generateCode() {
  this.toggleButton = true
  //rest of your logic
}

<v-btn class="changeNumberBtn" :disabled="toggleButton" @click="changeNumber()">Change Number</v-btn>

Upvotes: 1

void
void

Reputation: 36703

Keep a property in data say numberDisabled. Initialize it to true then on click of Continue, change toggle its value to false and in the changeNumber button set disabled value to this variable.

<v-flex xs12 sm6>
    <v-btn class="changeNumberBtn" :disabled="numberDisabled" @click="changeNumber()">Change Number</v-btn>
</v-flex>

<v-btn round block color="blue darken-3" dark large @click="numberDisabled=false;">Continue</v-btn>

just to show the idea, I am changing the variable on @click, though you can move it inside generateCode method.

Upvotes: 1

Sagar Kharche
Sagar Kharche

Reputation: 2681

You can conditionally disable/enable button as below.

var app = new Vue({
  el: '#app',

  data: {
    disabled: true,
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button  id="name" class="form-control" :disabled="disabled">Change Number</button>
  <button @click="disabled = !disabled">Continue</button>
</div>

Upvotes: 1

Related Questions