时间戳

首页 > 解决方案 > 禁用按钮仍然触发事件vue js

javascript - 禁用按钮仍然触发事件vue js

问题描述

我正在处理一个分页，如果响应为空，该分页将变为禁用

这是回应

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

这是分页

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

该按钮将变为禁用但事件仍在触发这是什么解决方案？

标签： javascriptvue.js

解决方案

对于 Vue 解决方案，您可以使用Event Modifiers，但是，如果您不需要 Vue 解决方案，我建议您使用 CSS one -指针事件- 只需将此属性添加到.disabled子元素：

.disabled a { pointer-events: none }


.disabled {
  pointer-events: none;
}
<a href="#">foo</a>
<br>
<a href="#" class="disabled">bar</a>

推荐阅读