vuejs 正在使用一个修改后的事件指令，没有事件处理程序 OK

Question

在以下代码片段中，fireCheck捕获对<li>的点击并切换随附的复选框。

在复选框上，我修改了一个单击侦听器以阻止事件冒泡到父元素(这可以防止封闭<li>的单击处理程序触发并抛出错误(，但没有实际处理复选框的单击事件。

<li v-for="datum in data" @click="fireCheck($event)">
    <input @click.stop type="checkbox" v-model="datum.checked" v-bind:value="data.name"/>
</li>

我这样做是作为冰雹玛丽的，它在主要浏览器的当前版本中没有产生任何错误。这不好吗？

Answer 1

不好吗？嗯，是也不是。据我所知，您的输入仍然可以通过键盘访问(即使屏幕阅读器找不到有关该复选框可能是什么的任何信息(，并且您的模型仍然是反应性的。

也就是说，您正在重新发明轮子。标签 html 元素将表单域与说明链接起来。它还捕获单击，并根据表单域的类型，聚焦表单域，切换表单域或打开文件对话框。你真的应该使用它而不是你自己的实现。

<li v-for="datum in data">
  <label>
    <span class="screen-reader">{{ datum.name }}</span>
    <input type="checkbox" v-model="datum.checked" :value="datum.name">
  </label>
</li>