vue判断是否触发点击事件

在用vue开发功能的时候，要做一个分页的组件。我们知道分页有上一页和下一页功能，当到最后一页的时候，下一页按钮应该为灰色，不可以点击。

分页效果如下：

分页效果

先看下改进前的代码：

<li
		class="page-item"
		:class="{ disabled: !paginator.isHaveNext }"
		@click="getArticleList(currentPage + 1)"
>
		<a class="page-link" href="javascript:void(0);" aria-label="Next">
				<span aria-hidden="true">&raquo;</span>
				<span class="sr-only">Next</span>
		</a>
</li>

其中：

1. paginator 是分页对象。
2. paginator.isHaveNext 表示是否有下一页数据。
3. disabled 样式用来置灰按钮。
4. click 事件会调用下一页的文章数据。

存在的问题

当到最后一页，按钮变成灰色后，点击按钮依旧会触发 getArticleList 方法。

解决办法：

本来一开始是想通过if判断 增加 click事件，如果有下一页才增加点击事件，但是查遍官网，vue貌似没有这种写法。

所以我就变通了一下，在点击事件处理前面增加一个是否有下一页的判断，代码如下：

<li
		...
		@click="paginator.isHaveNext && getArticleList(currentPage + 1)"
>
...

这样就可以实现了，主要是应用了短路与的知识点，当第一个判断条件为false的时候，就不会执行后面的判断了。

关于短路与，大家可以参考我之前写的JavaScript教程，运算符章节：

https://blog.csdn.net/chenjiebin/article/details/120230181?spm=1001.2014.3001.5502

有问题可以和我交流。

转载请注明：快乐编程 » vue判断是否触发点击事件