CODEWITHSUNDEEP
javascriptvue.jsevents
Yahoo
Yahoo

Reputation: 568

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');
    }
  }
})

Upvotes: 1

Views: 876

Answers (2)

Ryan Pham
Ryan Pham

Reputation: 196

pointer-events: unset is not working for me.

I'm using none instead

.disabled{
    pointer-events: none;    
}

Upvotes: -1

Tim
Tim

Reputation: 374

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/

Upvotes: 1

Related Questions