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

Question

我在复选框标签内输入了一个数字，如上面的屏幕截图所示。当我单击输入的 plus/minus 按钮更改数字时，它也会更改复选框的 checked 值，这是一种意外的副作用。我该如何预防副作用？

<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

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

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

Answer 2

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

.native binds a handler for a native DOM event (click 在这种情况下）。此修饰符的警告是它取决于 el-nput-number 的实现（根元素必须始终发出 click 事件）。
.prevent invokes 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>

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

event conflict for component containing another component

vue.js

vuejs2

element-ui