Блог

У меня есть кликабельный список в приложении Vue/Nuxt. Когда выбран один элемент, появляется маленькая галочка. Я хотел бы иметь возможность отменить выбор элемента (галочка исчезнет), если элемент будет нажат снова. Если я нажму на другой элемент, я хотел бы, чтобы этот элемент был выбран, а ранее выбранный элемент был снят (можно выбрать только один элемент). До сих пор, если я попытаюсь выбрать другой элемент, мне нужно нажать дважды, потому что при первом щелчке будет снят выбор только первого выбранного элемента, а при втором щелчке будет выбран новый элемент. Есть идеи ??

 <template>
  <div
    v-for="(item, itemIndex) in list"
            :key="itemIndex"
            @click="onClick(itemIndex)"
  >
    <div>
      <div v-if="activeIndex == itemIndex amp;amp; selected === true">
        <TickMark />
      </div>
      <Item />
    </div>
  </div>
</template>

<script>

export default {
    props: {
        questionModules: {
            required: true,
            type: Array,
        },
    },
    data() {
        return {
            activeIndex: null,
            selected: false,
        }
    },
    methods: {
        onClick (index) {
            this.activeIndex = index
            this.selected = !this.selected
        },
    },
}
</script>

 

поскольку вам не нужно менять позиции или сортировать список — сохранение выбранного индекса просто отлично, сделайте это так:

 <template>
  <section
    class="items-list">
    <template v-for="(item, itemIndex) in list"
            :key="itemIndex" >

      <TickMark v-if="activeIndex === itemIndex 
       @click="selectItem(itemIndex)"  /> // by clicking on the mark - it will toggle the selection


      <Item />

    </template>
  </section>

</template>

<script>

export default {
    props: {
        questionModules: {
            required: true,
            type: Array,
        },
    },
    data() {
        return {
            activeIndex: null
        }
    },
    methods: {
        selectItem (index) {
            this.activeIndex = index
        },
    },
}
</script>
 

Я изменил архитектуру DOM, чтобы в нем не было всех ненужных элементов