CODEWITHSUNDEEP
vue.jsvuejs2element-ui
Ian
Ian

Reputation: 354

event conflict for component containing another component

screenshot

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>

Upvotes: 1

Views: 669

Answers (2)

tony19
tony19

Reputation: 138526

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/[email protected]/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<script src="https://unpkg.com/[email protected]/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>

Upvotes: 0

NIRAV PAREKH
NIRAV PAREKH

Reputation: 137

No. this is incorrect nest for your goal. clicking on any nested element also fires click event on parent. All you can do is keep checkbox and number as siblings. not inherited.

<el-checkbox-group v-model="auditFinding" style="display:flex;flex-direction: column;">
   <div v-for="item in auditFindings">
       <el-checkbox @change="checkAuditFinding" :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 }}
   </div>
</el-checkbox-group>

Upvotes: 1

Related Questions