Vue предотвратить распространение событий на детей условно - PullRequest
Новая
       30

Vue предотвратить распространение событий на детей условно

1 голос
/ 25 сентября 2019

Это пример ColorButtonGroup компонента Vue (только шаблон), который служит группой флажков / кнопок переключения и имеет ограничение макс.Выбранные параметры (в данном случае 4 цвета).

Используется компонент ToggleButton, который работает как простой выбор переключения с применением стилей, и это один из общих компонентов, которые мы должны использовать в проектах. 

<template>  
  <div
    class="color-button-group"
    :class="[typeClass, variationClass]">
    <ToggleButton
      v-for="(item, index) in items"
      :key="index"
      :color="item.color"
      :type="type"
      @click.native="validateClick"
      @change="onChange(item.id)" />
  </div>
</template>

Я реализовал всю логику, необходимую через методы и обработчики событий, и все работает отлично, но также возможно переключать кнопки визуально после макс.выбор достигнут.

Текущее поведение:

Current behavior

Желаемое поведение:

Desired behavior

Как предотвратить распространение событий на дочерние элемент (ы) условно?

stopPropagation и preventDefault, так как всплывающие подсказки и предотвращение действий по умолчанию не помогли.

При макс.выбранные цвета, кнопка переключения уровня ниже не должна срабатывать (отключенное состояние не разрешено использовать).

...