disabled button still firing event vue js

Question

I'm working on a pagination that will become disable if the response is null

this is the response

pagination:Object
  current_page:1
  last_page:4
  next_page_url:"http://localhost/acct/public/api/businesses?page=2"
  prev_page_url:null

this is the pagination

<nav aria-label="...">
  <ul class="pager">
     <li :class="[{disabled: !pagination.prev_page_url}]" ><a href="#" @click="fetchBusiness(pagination.prev_page_url)">Previous</a></li>
     <li :class="[{disabled: !pagination.next_page_url}]" ><a href="#" @click="fetchBusiness(pagination.next_page_url)">Next</a></li>
  </ul>
</nav>

the button will become disable but the event is still firing what is the solution for this?

wirher · Accepted Answer · 2018-07-03 07:22:07Z

17

You are adding a class which only applies visual styles. If you were really using button element, you would be able to conditionally add "disabled" attribute to element and it would disable "click" events. I'm afraid it won't work this way with "li" elements. If you want to keep you existing layout, try to change your click handlers from

@click="fetchBusiness(pagination.prev_page_url)"

to

@click="!!pagination.prev_page_url && fetchBusiness(pagination.prev_page_url)"

answered Jul 3, 2018 at 7:22

wirher

9761 gold badge8 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 20:14:16Z

16

For a Vue solution you can use Event Modifiers, however, if you don't need a Vue solution I'd recommend a CSS one - pointer-events - just add this property to the .disabled child element:

.disabled a { pointer-events: none }

.disabled {
  pointer-events: none;
}

<a href="#">foo</a>
<br>
<a href="#" class="disabled">bar</a>

edited Jul 15, 2022 at 20:14

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jul 3, 2018 at 7:21

Vucko

20.9k12 gold badges60 silver badges108 bronze badges

2 Comments

wittgenstein Over a year ago

thanks, helped me a lot and the solution works in most cases: caniuse.com/?search=pointer-event

webkit Over a year ago

Anyway to achieve pointer-events none only for JS callbacks and not for :hover behavior?

Nik.Developer · Accepted Answer · 2018-07-03 10:10:14Z

0

You are using vue.js, so you can use that conditions like,

<button v-if="pagination.prev_page_url !== null" type="button" @click="fetchBusiness(pagination.prev_page_url)">Previous</button>
<button v-else type="button" disabled>Previous</button>

<button type="button" v-if="pagination.next_page_url !== null" @click="fetchBusiness(pagination.prev_page_url)">Next</button>
<button  type="button" v-else disabled>Next</button>

edited Jul 3, 2018 at 10:10

answered Jul 3, 2018 at 7:28

Nik.Developer

1319 bronze badges

1 Comment

Travis Over a year ago

You can also use a dynamic attribute:

<button :disabled="pagination.prev_page_url === null" type="button" @click="fetchBusiness(pagination.prev_page_url)">Previous</button>

Ali Raza · Accepted Answer · 2021-09-27 14:38:04Z

0

You can add condition class and write CSS to prevent any click event.

 :class="gettingDataField && `disabled-click`"  // vue

.disabled-click { pointer-events: none }  //css

answered Sep 27, 2021 at 14:38

Ali Raza

1,08314 silver badges20 bronze badges

Collectives™ on Stack Overflow

disabled button still firing event vue js

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related