javascript - Vue 传播事件到子元素

Question

我有一些 html 可以呈现这些小盒子:

<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>

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

Answer 1

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

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

编辑(见评论):删除plot()来自 <input>元素的更改处理程序以防止 plot()如果单击复选框，函数将被调用两次。

查看下面的代码段。

var app = new Vue({
  el: '.token-checkboxes',
  methods: {
    plot() {
      console.log('Plot called!');
    }
  },
  data: {
    token_to_vue_obj: [
      { token: '_#misc',  show: true },
      { token: '_#study', show: true },
      { token: '_#code',  show: true },
      { token: '_#debug', show: true },
      { token: '_data',   show: false }
    ]
  }
})

.checkbox-span {
  background-color: lightgrey;
  padding: 0.5em;
  border-radius: 0.5em;
  border: 2px solid black;
  margin: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

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

---

编辑:见下方评论。非唯一 id="checkbox"导致问题。