Javascript Vue将事件传播到子元素

我有一些html来呈现这些小方框：

{{token_obj.token}}

---

我希望单击外部pill元素（灰色背景区域）的效果与单击复选框本身的效果相同。有没有一种简单的方法可以将父元素上的事件“转发”到子元素或类似的东西？

您可以在外部元素上添加事件侦听器来更改模型值。这并不是真正的转发事件，但它应该具有相同的效果（单击药丸切换复选框）

.checkbox span{
背景颜色：浅灰色；
填充：0.5em；
边界半径：0.5em；
边框：2件纯黑；
边缘：0.5em；
}

{{token_obj.token}}

是的，这很有效。谢谢但在您的代码片段中，每次我单击任何跨度时，第一个复选框都会切换。我不知道为什么。@Jesseldridge哇，真奇怪。我在上面@杰西尔德里奇找到了！更改

id=“复选框”

。似乎Vue可能在幕后使用id来尝试更改模型属性，而对多个元素使用相同的id会导致第一个元素始终更改。（例如，将其更改为

class=“checkbox”

fixed things）。Dang，再次感谢。我永远也想不到这一点。不是Vue在幕后做什么，而是javascript。当按Id选择时，JS只关心返回一个，因此它将返回它找到的第一个，给出您想要的行为。显然，这里的修复方法是使用类：）

<div class="token-checkboxes">
  <span class="checkbox-span" v-for="token_obj in token_to_vue_obj">
    <input v-on:change="plot()" type="checkbox" id="checkbox" v-model="token_obj.show">
    <label for="checkbox">{{ token_obj.token }}</label>
  </span>
</div>

<span class="checkbox-span"
      v-for="token_obj in token_to_vue_obj"
      v-on:click="token_obj.show = !token_obj.show; plot()">