如何使父标记和子标记在b-form-checkbox上单击而不重复

Question

我有一个带有一些不同子标签的li标签，其中还包括一个b-form-checkbox。我希望当我单击li标记上的任何位置时，复选框都能工作，它也包括在复选框上。当我单击li中的任何位置时，它都可以正常工作，但当我单击b-form-checkbox时，会调用onclick事件2次，复选框只需在单击1次时进行选中和取消选中。我已经尝试了很多类似.self的方法，但b-form-checkbox上的v-on:click不起作用。

下面的CCD_ 8标签代码，包括它们所在的b-form-checkbox和template标签。

<template v-for="(product, index) in products">
<div
class="col-12 col-md-6"
:key="product.id"
v-if="!product.responded"
>
<li
class="products-search__list-item"
v-on:click.self="toggleProduct(index)"
>
<div v-on:click.self="toggleProduct(index)" class="products-search__image">
<img :src="product.img" alt="product.id" />
</div>
<div v-on:click.self="toggleProduct(index)" class="products-search__details">
<span>{{ product.amount }}x {{ product.name }}</span>
<span v-if="$func.regionCheckGLobal()"
>$ {{ product.unitPrice }} / unit</span
>
<span v-else>PKR {{ product.unitPrice }} / unit</span>
</div>
<div v-on:click.self="toggleProduct(index)" class="products-search__check-box" >
<b-form-checkbox v-on:click.self="toggleProduct(index)"  v-model="product.checked" > </b-form-checkbox>
</div>
</li>
</div>
</template>

下方脚本部分相关变量中的data()

return {   
products: [],
};

与onclick相关的vue脚本部分中的methods:代码

toggleProduct(index) {
this.products[index].checked = !this.products[index].checked;
}

Answer 1

<template>
<div class="container">
<div v-for="(product, index) in products" :key="index">
<div class="col-12 col-md-6" :key="product.id" v-if="!product.responded">
<li class="products-search__list-item" @click="toggleProduct(index)">
<div class="products-search__image">
<img :src="product.img" alt="product.id" />
</div>
<div class="products-search__details">
<span>{{ product.amount }}x {{ product.name }}</span>
<span>$ {{ product.unitPrice }} / unit</span>
</div>
<div class="products-search__check-box">
<b-form-checkbox v-model="product.checked" />
</div>
</li>
</div>
</div>
</div>
</template>

这就是我修改模板的方式，而不是输入类型复选框。你可以使用b-form-checkbox，它的行为应该与我的示例中的输入相同。这是我所做的代码沙盒链接，我相信这就是你所需要的，现在我将更详细地解释：

由于您在li的所有子组件上都有所有这些click侦听器，因此您在有单击侦听器的区域(例如checkbox和div，checkbox所在，带有复选框的div所在的div(上的单击会冒泡到最外面的组件，在这种情况下，你要么在最外面的组件上放一个点击监听器，你想用我们想要触发点击的每个子组件触发动作(请不要做嵌套处理程序(。

总之，不要做嵌套事件侦听器！

希望它能有所帮助！

更新：再次检查您的代码，查看我的代码和您的代码之间的差异，为您添加了bootstrap-vue，并在codesandbox示例中使用了b-form-checkbox！这是你想要的工作方式：D

Answer 2

上面的答案也是正确的，但在我的情况下并没有完全解决，可能是因为我使用引导插件的方式存在一些问题，但无论如何。我在存在b-form-checkbox的直接父div上使用了v-on:click.stop.prevent="toggleProduct(index)"，并删除了除li和checkbox之外的所有click事件侦听器，这对我来说很有效。

李点击监听器如下所示。

<li  class="products-search__list-item"
v-on:click="toggleProduct(index)
>

b-form-复选框点击监听器显示在下方

<div v-on:click.stop.prevent="toggleProduct(index)"  class="products-search__check-box" >
<b-form-checkbox   v-model="product.checked" > </b-form-checkbox>
</div>