Disable Link in Vue.js

September 7, 2019

If you want to disable hyper links in your Vue component you can use the following code. So this will make your link not clickable and grays it out to look diabled

<template> 
<nav class="pagination is-rounded" role="navigation" aria-label="pagination">

                <ul style="margin-left:10px" class="pagination-list">

                    <li>{{meta.from}} - {{meta.to}} of {{meta.total}} </li>

                    <li><span class="pagination-ellipsis">&hellip;</span></li>

                    <li  :class="meta.current_page ==  1 && 'disabled'">
                        <a class="pagination-link" @click="paginationClick" :id="(meta.current_page -1)"><</a> </li> 
                        <li  :class="meta.current_page === meta.last_page && 'disabled'"><a class="pagination-link" @click="paginationClick" :id="(meta.current_page +1)">></a></li>
                    <li><span class="pagination-ellipsis">&hellip;</span></li>

                </ul>
            </nav>


</template>




<style>
.disabled {
    pointer-events:none; 
    opacity:0.6;        
}
</style>