I have a scenario with two confirmation buttons - when one button is clicked, it should disable the other button and reveal the content of a specific span element.
Initially, both buttons should be enabled until the page loads. Additionally, I want to alternate the 'btnClicked' class based on which button is enabled or disabled.
I feel like I'm close to solving this issue, but I'm struggling to identify the next step. As a beginner in learning Vue.JS, I would appreciate any guidance on where I may be going wrong in this code snippet.
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>