Disable the button that's not clicked in Vue.JS

user_5757070 0
Viewed 757

I have two confirmation buttons and when the user clicks on a button, it should disable the other while showing the content of a span element when the user clicks on the 'Yes' button.

You'd think it works, because I can only set a default to which button is "disabled". Both should start as enabled when the page loads. And I'd also like to toggle the btnClicked class between which button is enabled and which is disabled.

I'm almost there but I just don't see what the next step would be. (Also just started learning Vue.JS and would really appreciate if someone can look at this snippet and tell me what I'm doing wrong.)

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

  data: {
    disabled: 0,
  },
}); 
.btnClicked{
  background: green;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <button @click="disabled = (disabled + 1) % 2, $event.target.classList.toggle('btnClicked')"  :disabled="disabled == 1">Yes</button>
   <button @click="disabled = (disabled + 1) % 2, $event.target.classList.toggle('btnClicked')"  :disabled="disabled == 0">No</button>
   
   <span v-if="disabled == 1" class="showifYes">You just clicked Yes</span>
</div>

vue.js javascript
1 Answers

You mean something like this ?

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

  data: {
    disabled: null,
  },
}); 
.btnClicked{
  background: green;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <button :class="(disabled === 1) ? 'btnClicked' :  ''" @click="disabled = (disabled + 1) % 2"  :disabled="disabled === 1">Yes</button>
   <button :class="(disabled === 0) ? 'btnClicked' :  ''" @click="disabled = (disabled + 1) % 2"  :disabled="disabled === 0">No</button>
   
   <span v-if="disabled == 1" class="showifYes">You just clicked Yes</span>
</div>

user_50541750
Related