event conflict for component containing another component

Question

I have a number input inside a checkbox label, as shown in the screenshot above. When I click the input's plus/minus buttons to change the number, it also changes the checkbox's checked-value as an unintended side effect. How do I prevent the side effect?

<template>
  <el-checkbox-group v-model="auditFinding" @change="checkAuditFinding" style="display:flex;flex-direction: column;">
    <el-checkbox v-for="item in auditFindings" :key="item.value" :label="item.label">
      <el-input-number v-if="item.value !== 'N/A'" v-model="item.num" :disabled="item.disabled" :min="0" :max="99" size="small" />
      {{ item.value }}
    </el-checkbox>
  </el-checkbox-group>
</template>
<script>
export default {
  //...
  methods: {
    checkAuditFinding(val) {
      const t = val.toString()     
      this.auditFindings.map(item => {
        if (val.indexOf(item.value) > -1) {
          item.disabled = false
        } else {
          item.disabled = true
        }
      })      
    },
  }
}
</script>

Answer 1

You could stop the click-event propagation from the el-input-number element by using the @click.native.prevent event modifiers.

• .native binds a handler for a native DOM event (click in this case). The caveat to this modifier is it depends on the implementation of el-nput-number (the root element must always emit click event).

• .prevent invokes Event.preventDefault to effectively cancel the click-event, preventing it from reaching the parent checkbox.

new Vue({
  el: '#app',
  data() {
    return {
      auditFinding: false,
      auditFindings: [
        { value: 11, label: 'label A', disabled: false, num: 1 },
        { value: 22, label: 'label B', disabled: false, num: 2 },
        { value: 33, label: 'label C', disabled: false, num: 3 },
      ]
    }
  },
  methods: {
    checkAuditFinding(e) {
      console.log('checkAuditFinding', e)
    },
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>

<div id="app">
  <el-checkbox-group v-model="auditFinding" @change="checkAuditFinding" style="display:flex;flex-direction: column;">
    <el-checkbox v-for="item in auditFindings" :key="item.value" :label="item.label">
      <el-input-number @click.native.prevent
                       v-if="item.value !== 'N/A'"
                       v-model="item.num"
                       :disabled="item.disabled"
                       :min="0"
                       :max="99"
                       size="small"
                       label="item.label" />
      {{ item.value }}
    </el-checkbox>
  </el-checkbox-group>
</div>