包含另一个组件的组件的事件冲突答案

【问题标题】：event conflict for component containing another component包含另一个组件的组件的事件冲突
【发布时间】：2019-12-23 04:02:43
【问题描述】：

我在复选框标签内输入了一个数字，如上面的屏幕截图所示。当我单击输入的加号/减号按钮来更改数字时，它还会将复选框的 checked-value 更改为意外的副作用。如何预防副作用？

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

【问题讨论】：

尝试将@change="checkAuditFinding"从el-checkbox-group移动到el-input-number，或者在@change之后添加.stop(@change.stop)

标签： vue.js vuejs2 element-ui

【解决方案1】：

没有。对于您的目标，这是不正确的嵌套。单击任何嵌套元素也会触发父级上的单击事件。您所能做的就是将复选框和数字保留为兄弟姐妹。没有继承。

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

【讨论】：

【解决方案2】：

您可以使用@click.native.prevent 事件修饰符来阻止click-事件从el-input-number 元素传播。

.native 绑定原生 DOM 事件的处理程序（在本例中为click）。这个修饰符需要注意的是它取决于el-nput-number 的实现（根元素必须始终发出click 事件）。
.prevent 调用Event.preventDefault 来有效地取消click 事件，防止它到达父复选框。

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>

【讨论】：