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?

Answer 1

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