• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

249
Views
¿Por qué Alpine.js no funciona con todos los eventos de sus ejemplos?

Estoy probando Alpine.js, pero algunos de los ejemplos no me funcionan. Por ejemplo

 <button x-on:click="alert('Hello World!')">Say Hi</button>

Esto no alerta nada.

 <button x-on:click="console.log('test')">Log</button>

Y esto no registra nada en la consola. Sin embargo, otras cosas funcionan:

 <div x-data="{ count: 0 }"> <button x-on:click="count--">Decrement</button> <code>count: </code><code x-text="count"></code> <button x-on:click="count++">Increment</button> </div>

Esta es toda mi pagina:

 <!DOCTYPE html> <html> <body> <h1>Works</h1> <div x-data="{ count: 0 }"> <button x-on:click="count--">Decrement</button> <code>count: </code><code x-text="count"></code> <button x-on:click="count++">Increment</button> </div> <div x-data="{ open: false }"> <button @click="open = ! open">Expand</button> <div x-show="open"> Content... </div> </div> <div x-data="{ title: 'Start Here' }"> <h1 x-text="title"></h1> </div> <button x-data="{ label: 'Click Here' }" x-text="label"></button> <h1>Doesn't work</h1> <button x-on:click="console.log('test')">Log</button> <button x-on:click="alert('Hello World!')">Say Hi</button> <button @click="$event.target.remove()">Remove Me</button> <div @foo="console.log('foo was dispatched')"> <button @click="$dispatch('foo')">Dispatch</button> </div> <script defer src="https://unpkg.com/alpinejs@3.xx/dist/cdn.min.js"></script> </body> </html>

¿Qué estoy haciendo mal?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Sus ejemplos que no funcionan no tienen un atributo de datos x (ya sea en sí mismos o en un padre). Ya sea que haya datos o no, se requiere el atributo x-data para obtener la funcionalidad de AlpineJS.

Si envuelve toda la sección "No funciona" en un <div x-data></div> , deberían funcionar:

 <div x-data> <button x-on:click="console.log('test')">Log</button> <button x-on:click="alert('Hello World!')">Say Hi</button> <button @click="$event.target.remove()">Remove Me</button> <div @foo="console.log('foo was dispatched')"> <button @click="$dispatch('foo')">Dispatch</button> </div> </div>
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error