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

您要添加一个仅应用视觉样式的类。如果您确实在使用按钮元素，则可以有条件地向元素添加“ disabled”属性，并且可以禁用“ click”事件。恐怕它无法与“ li”元素一起使用。如果您想保留现有布局，请尝试从以下位置更改点击处理程序

@click="fetchBusiness(pagination.prev_page_url)"

到

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

Answer 2

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

.disabled

.disabled a { pointer-events: none }

.disabled {
  pointer-events: none;
}

Answer 3

您正在使用vue.js，因此可以使用类似这样的条件

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

禁用的按钮仍会触发事件vue js

3 个答案: