禁用按钮仍然触发事件 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>

按钮将变为禁用，但事件仍在触发，对此有什么解决方案？

Answer 1

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

.disabled a { pointer-events: none }

.disabled a { pointer-events: none }

.disabled {
  pointer-events: none;
}

Answer 2

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

@click="fetchBusiness(pagination.prev_page_url)"

到

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