Question

171

Alpine.js: How do I access x-data from a function in an external file?

rated 0 times [ 178] [ 7] / answers: 1 / hits: 13381 / 3 Years ago, fri, april 16, 2021, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

reed

Add To Favorites

Follow

Total Points: 725

Total Questions: 85

Total Answers: 89

Location: Singapore

Member since Sat, Jul 25, 2020

4 Years ago

reed questions

1 npx react-native link command not working in latest version of react native. How can we link custom font family in my project

Tue, Jul 5, 22, 00:00, 2 Years ago

1 I have an error : Cannot find module './utils'

Sun, Aug 16, 20, 00:00, 4 Years ago

1 react drag,drop, and connect arrow(or anything else) with animation between elements

Tue, Jun 16, 20, 00:00, 4 Years ago

1 Lodash.uniqueId always returns 1

Thu, May 23, 19, 00:00, 5 Years ago

1 React NextJS app, installed webpack, then removed it: Error: Cannot find module 'webpack/lib/node/NodeOutputFileSystem'

Sat, Feb 16, 19, 00:00, 5 Years ago

View All

answered 3 Years ago tatianah · Accepted Answer

You'll need to add the method to the AlpineJs instance to access the same scope. But you can do this with some object destructuring using the spread ... operator:

In the page:

<div x-data="{

  isLoading: false,

  ...utils

}">

    // Your content

</div>

Then in your external script file:

const utils = {

  post(){

    this.isLoading = true

  }

}



window.utils = utils

The nice thing about this is you could put everything you need for a loading indicator in this external object to use as a mixin wherever you need it.

Here's a working example: https://codepen.io/stephenoldham/pen/BapvyYr

Update for AlpineJs v3:

If you're trying to achieve the same goal in the latest version of AlpineJs you'll need to use the Data Directive:

In the page:

<div x-data="utils">

    // Your content

</div>

Then in your external script file:

document.addEventListener('alpine:init', () => {

    Alpine.data('utils', () => ({

        isLoading: false,

        post(){

            this.isLoading = true



            setTimeout(() => {

                this.isLoading = false

            }, 3000)

        }

    }))

})

Here's a working example:
https://codepen.io/stephenoldham-the-vuer/pen/dyJEjRx?editors=1100

Further reading in the docs covers how to set initial values and more:
https://alpinejs.dev/globals/alpine-data