Alpine: this simple example is not working, am I missing something here?

Created on 5 May 2020 · 4Comments · Source: alpinejs/alpine

Testing this, clicking the button does not print anything to console:

<html>
<head>
  <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
  <button @click="console.log('not printing')">this is not working</button>
</body>
</html>

Running this in the console I get this version:

> alpine
{version: "2.3.3", start: ƒ, discoverComponents: ƒ, discoverUninitializedComponents: ƒ, listenForNewUninitializedComponentsAtRunTime: ƒ, …}

I even tried calling alpine.start().

I just tried this a couple of hours ago, read the example in the example/ directory.

I'm missing something obvious here, any pointer would be appreciated.

Thanks

question

Source

dstpierre

All 4 comments

Hi @dstpierre, looks like you're missing the x-data directive. You can either add it to the button directly, so <button x-data="{}" @click...> or add it to the <body> element.

Word of warning on adding it to the <body> element. For large pages, this will be a huge perfomance bottleneck since Alpine will have to scan the entire DOM.