Multi tool use

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?

3 Answers
3

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


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

.disabled a { pointer-events: none }


.disabled {
pointer-events: none;
}

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

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>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.