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

Posted 2023-02-16

【中文标题】如果单击两次而不在 vue nuxt 应用程序中切换，如何隐藏列表中的元素

【英文标题】：How to hide an element from a list if clicked twice without toggling in a vue nuxt application

【发布时间】：2021-12-15 07:23:15

【问题描述】：

我在 Vue/Nuxt 应用程序中有一个可点击的列表。选择一个项目时，会出现一个小刻度线。如果再次单击该项目，我希望能够取消选择该项目（刻度线消失）。如果我单击另一个项目，我希望选择该项目并取消选择之前选择的项目（只能选择一个项目）。到目前为止，如果我尝试选择另一个项目，我需要单击两次，因为第一次单击只会取消选择第一个选定的项目，而第二次单击将选择新项目。有什么想法吗？？

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

【参考方案1】：

因为您不需要更改位置或对列表进行排序 - 保持选定的索引就可以了，这样做：

<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 的架构，因此它不会包含所有不必要的元素