vue 绑定的两个click事件，只有第一个能生效？

Question

模板代码如下：

<span v-if="!data.not_today"><label><input id="hideCompleteBtn"
                type="checkbox">隐藏</label></span>
<span v-else><label v-on:click="jumpToLaw('l')">上一天</label><label style="margin-left:8px;" v-on:click="jumpToLaw('n')">下一天</label></span>

jumpToLaw 事件只有在点击上一天的时候能触发，点击下一天没反应，求大神指点，谢谢。

我之前用的是 a 标签，我以为是 a 标签的问题，于是改成了 label 标签，发现还是一样。

奇了怪了，我把上面的代码改成：

<span v-if="!data.not_today"><label><input id="hideCompleteBtn"
                type="checkbox">隐藏</label></span><span v-else style="display:inline-flex;"><div v-on:click="jumpToLaw('l')">上一天</div><div style="margin-left:8px;" v-on:click="jumpToLaw('n')">下一天</div></span>

我发现只要这两个字符串在同一行，后面那个点击事件就绑定不了，我去掉 display:inline-flex; 它就能绑定了，可我现在的需求是 上一天 下一天 这两字符串要显示在一行啊，咋搞？

Answer 1

我在本地测试了一下，是没有问题的。
你出现的可能原因如下：
1、打开开发者模式，去取一下dom 看看是不是样式的问题，导致文字是在你想要的位置，但是dom 不在
2、看看方法是否放在相同的位置。

Answer 2

为什么要加.native呢？
控制台的报错应该会告诉你The .native modifier for v-on is only valid on components but it was used on <label>.

Answer 3

Vue3 测试了一下，没毛病

CodePen 上做了个 Vue2 的，也没发现问题：
https://codepen.io/jamesfancy...

所以，jumpToLaw 里面到底干了什么不得了的事情？