javascriptvue.jsevents

How to trigger an event on a disabled button?


Hey I am really new to Vue and for this project I want to trigger event on disabled button. Is there a way to trigger event on disabled button?

JsFillde Code Link = https://jsfiddle.net/ujjumaki/Lg4vcj97/6/

View

<div id="app">
  <b-button @click="disabledButton" disabled >Disabled</b-button>
  <b-button @click="enabledButton" >Enabled</b-button>
</div>

Method

new Vue({
  el: "#app",
  data: {

  },
  methods: {
    disabledButton(){
        console.log('clicked disabled');
    },
    enabledButton(){
        console.log('clicked enabled');
    }
  }
})

Solution

  • Does the button truly need to be disabled or can you simulate a disabled state?

    I added bootstrap css for the 'disabled' class here, but it's not necessary.

    // template
    <b-button  @click="disabledButton"  class="disabled-btn disabled" >Disabled</b-button>
      
    
    // css
    .disabled-btn{
        cursor: default !important;
        pointer-events: unset !important;
        
    }
    
    

    https://jsfiddle.net/qjacr38y/23/