Как избавиться от дублирование данных в методе vue?

Question

[ByJumping]

Привет, есть компонент

<div class="form__select_wrapper">
      <div class="form__select_checkbox" v-for="(item, i) in stepOneTitle" :key="item">
        <label @click="changeType(item, i)">
          <input class="form__checkbox" type="checkbox">
          <span class="form__custom_checkbox"></span>
          <span class="form__checkbox_text">{{ item }}</span>
        </label>
      </div>
    </div>

сам метод

changeType(item, i) {
      console.log(item)
      this.$emit('changeType', item);
    }

В item всегда прилетает строка, заголовок. Этот заголовок в будущем мне нужно поместить в массив

Так вот консоль всегда выводит 2 раза item. И если я захочу методом push добавить в массив item, то он добавит его 2 раза.

А если события клика навесить, например на input или span, то все нормально

Как избавиться от этого дублирования? мне нужно что бы событие клика висело на label

Comments

[0xD34F]

мне нужно что бы событие клика висело на label

Во-первых, "чтобы" - пишется слитно.

Во-вторых, "висят" не события, а обработчики событий.

В-третьих, к чёрту клик и к чёрту label. Разберитесь, что такое label - как он работает, для чего его используют. Вот прям сейчас погуглите. Обрабатывать надо change на input'е.

В-четвёртых, раз используете vuе - разберитесь, как работает v-model с чекбоксами и подумайте как его сюда прикрутить.