No puedo obtener el registro de la consola después de hacer clic en este elemento. Sin embargo, cambiar div a button obtendrá el resultado. Aquí está mi fragmento de código.
<div class="navbar"> <div x-on:click="console.log('clicked')" class="navitem msn"> <div> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"`enter code here` fill="none" viewBox="0 0 24 24" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg> <div class="navtitle">Title1</div> </div> </div>Tienes un par de errores:
x-data . Necesita al menos x-data vacíos en cualquier componente de Alpine.js.</div> .El ejemplo corregido:
<div x-data="" class="navbar"> <div x-on:click="console.log('clicked')" class="navitem msn"> <div> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg> <div class="navtitle">Title1</div> </div> </div> </div>