Tengo una aplicación Vue, donde tengo varios logotipos fontawesome idénticos con diferentes identificaciones.
<p @click="getId($event)" class="trash"><i id="1" class="fas fa-trash-alt"></i></p> <p @click="getId($event)" class="trash"><i id="2" class="fas fa-trash-alt"></i></p> <p @click="getId($event)" class="trash"><i id="3" class="fas fa-trash-alt"></i></p>Ahora, cuando hago clic en uno de esos logotipos, ejecuto el siguiente método:
getId(event){ console.log(event.currentTarget.id); }Cuando ahora hago clic en un logotipo, obtengo una salida de consola vacía. Busqué en Google este problema muchas veces y también probé cosas como:
<p class="trash"><i id="1" @click="getId(this)" class="fas fa-trash-alt"></i></p> getId(logo){ console.log(logo.id); }En este caso devuelvo un indefinido. ¿Cual podría ser el problema?
<p class="trash"><i id="1" @click="getId(this)" class="fas fa-trash-alt"></i></p> getId(logo){ console.log(event.target.id); }como Deepak mencionó en el comentario, todo lo que necesita hacer es obtener la identificación del objetivo del evento para obtener valor de elemen.