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

Question

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

这是回应

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>

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

原文由 Beginner 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正在添加一个仅应用视觉样式的类。如果你真的在使用按钮元素，你将能够有条件地向元素添加“禁用”属性，它会禁用“点击”事件。恐怕它不适用于“li”元素。如果您想保留现有布局，请尝试更改您的点击处理程序

@click="fetchBusiness(pagination.prev_page_url)"

至

@click="!!pagination.prev_page_url && fetchBusiness(pagination.prev_page_url)"

原文由 wirher 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 .disabled a { pointer-events: none }

 .disabled {
  pointer-events: none;
}

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

原文由 Vucko 发布，翻译遵循 CC BY-SA 4.0 许可协议