如果单击两次而不在 vue nuxt 应用程序中切换，如何从列表中隐藏元素

Question

I have got a clickable list in a Vue/Nuxt application. When one item is selected, a little tick mark appears. I would like to be able to unselect an item (the tick mark to disappear) if the item is clicked again. If I click on another item, I would like this item to be selected and the previously selected item to unselect (only one item can be selected). So far, if I try to select another item, I need to click twice because the first click will only unselect the first selected item and the second click will select the new item. Any idea ??

<template>
  <div
    v-for="(item, itemIndex) in list"
            :key="itemIndex"
            @click="onClick(itemIndex)"
  >
    <div>
      <div v-if="activeIndex == itemIndex && 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>

Answer 1

because you don't need to change positions or sort the list - keeping the selected index is just fine, do it like this:

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

I've changed the architecture of the DOM so it will be without all the un-necessary elements