How do I access x-data from a function in an external file?

[leo-petrucci]

I'm just starting out with Alpine.js, I understand the basics but I'm having trouble applying them when moving functions outside of inline script tags.

For example, in index.html:

<div x-data="{ loading: false }"/>
  <button
    onClick="post()"
    :class="{ 'active': loading === true }"
  >
    Post Comment
  </button>
</div>

if post() was in main.ts:

const postComment = () => {
  this.loading = true;
};

window.postComment = postComment;

How do I make it so that this isn't undefined?

I've found plenty of examples where functions are kept within index.html, but none where they're in a separate file.

[SimoTod]

You shouldn't mix the approaches. If you use Alpine and you decide to use an external file, the whole component needs to be extracted. this on an external function will never be your Alpine scope (this is how javascript works, though).
In general, the logic is the same as the index file, you just need to export the component on the window object if you use a bundler like webpack.

See https://codepen.io/SimoTod/pen/QWdBOYP

[leo-petrucci]

This really helped! I think I was formatting my function the wrong way which caused post() not to set the loading variable.
Thank you 😊