Question

我有以下Vue代码，显示我们正在使用的结构：

<template>
  <li class="mm-product-item" v-on:click="edit(item)">
    <p class="mm-product-info input-field">
      <input type="checkbox"
              class="filled-in"
              :id="'checkbox-' + item.id"
              :checked="item.addNextOrder"
              v-on:click.capture.stop="toggleNextOrder($event, item.id)" />
      <label :for="'checkbox-' + item.id"></label>
      <span class="mm-product-name" click="edit(item)">{{ item.name }}</span>
      <span class="mm-product-quantity">{{ item.quantity }}</span>
      <span class="mm-product-unit">{{ item.selectedUnit }}</span>
    </p>

    <button href="#remove-product" @click.prevent.stop="destroy(item.id)" class="mm-product-remove" title="remover produto">&times;</button>
  </li>
</template>

因此checkbox嵌套在p嵌套在li内。

作为父级的li具有更宽，更大的区域，应该触发edit(item)方法。这很好用。

checkbox虽然较小，但也应捕获点击事件并触发toggleNextOrder方法。

如果li中未指定任何事件，则checkbox事件处理工作正常。

但如果存在li事件（如上面的代码段所示），则checkbox事件甚至不会发生，但根据Vue's documentation，它应该会发生。

我能够使类似的情况工作得很好in this JSFiddle但是，由于某种原因，在这个生产环境中它无法正常工作。

有没有办法解决这个问题？

Answer 1

我在Chrome Dev Tools的帮助下发现了正在发生的事情。

复选框旁边有一个标签，与之关联：

libsecp256k1.0.dylib

使用Google Chrome的开发工具检查# If you copy and paste this, replace the spaces in front of `go build` # with a single horizontal tab character, else `make` will fail. # # Note that the "ldflags" specified are for the Go linker (go tool link), # not the system's linker (ld). build: go build -ldflags="-r /opt/libsecp256k1/lib"，似乎复选框“没有区域”：

•••

在检查旁边的`<input type="checkbox" (...) /> <label :for="'checkbox-' + item.id" (...) ></label>`时，向我显示它实际上“包裹并围绕”复选框：

•••

如何在父李中捕获子复选框点击事件？

1 个答案:

在检查旁边的`<input type="checkbox" (...) /> <label :for="'checkbox-' + item.id" (...) ></label>`时，向我显示它实际上“包裹并围绕”复选框：

所以我将`<input type=checkbox>`事件处理程序添加到标签，而不是复选框，现在它可以正常工作。

如何在父李中捕获子复选框点击事件？

1 个答案:

在检查旁边的<input type="checkbox" (...) /> <label :for="'checkbox-' + item.id" (...) ></label> 时，向我显示它实际上“包裹并围绕”复选框：

所以我将<input type=checkbox>事件处理程序添加到标签，而不是复选框，现在它可以正常工作。

在检查旁边的`<input type="checkbox" (...) /> <label :for="'checkbox-' + item.id" (...) ></label>`时，向我显示它实际上“包裹并围绕”复选框：

所以我将`<input type=checkbox>`事件处理程序添加到标签，而不是复选框，现在它可以正常工作。