конфликт событий для компонента, содержащего другой компонент

Question

У меня есть номер, введенный внутри метки флажка, как показано на скриншоте выше. Когда я нажимаю кнопки плюса / минуса на входе, чтобы изменить число, оно также меняет значение 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

Вы можете остановить распространение события click из элемента el-input-number, используя модификаторы событий @click.native.prevent.

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

Answer 2

Нет. это неверное гнездо для вашей цели. нажатие на любой вложенный элемент также запускает событие click для родителя. Все, что вы можете сделать, это сохранить флажок и номер в качестве братьев и сестер. не наследуется.

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