CODEWITHSUNDEEP
javascriptvue.js
Beginner
Beginner

Reputation: 1740

disabled button still firing event vue js

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?

Upvotes: 8

Views: 23792

Answers (4)

Vucko
Vucko

Reputation: 20834

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>

Upvotes: 16

Ali Raza
Ali Raza

Reputation: 1063

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

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

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

Upvotes: 0

Nik.Developer
Nik.Developer

Reputation: 131

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>

Upvotes: 0

wirher
wirher

Reputation: 976

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)"

Upvotes: 17

Related Questions