Tengo una lista en la que se puede hacer clic en una aplicación Vue/Nuxt. Cuando se selecciona un elemento, aparece una pequeña marca de verificación. Me gustaría poder anular la selección de un elemento (que desaparezca la marca de verificación) si se vuelve a hacer clic en el elemento. Si hago clic en otro elemento, me gustaría que se seleccione este elemento y que se anule la selección del elemento previamente seleccionado (solo se puede seleccionar un elemento). Hasta ahora, si trato de seleccionar otro elemento, necesito hacer clic dos veces porque el primer clic solo anulará la selección del primer elemento seleccionado y el segundo clic seleccionará el nuevo elemento. Alguna 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>porque no necesita cambiar posiciones u ordenar la lista; mantener el índice seleccionado está bien, hágalo así:
<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>Cambié la arquitectura del DOM para que no tenga todos los elementos innecesarios.