In the AlpineJS docs there's this example:

<div x-data="dropdown()">
    <button x-on:click="open()">Open</button>

    <div x-show="isOpen()" x-on:click.away="close()">
        // Dropdown
    </div>
</div>

<script>
    function dropdown() {
        return {
            show: false,
            open() { this.show = true },
            close() { this.show = false },
            isOpen() { return this.show === true },
        }
    }
</script>

Now what I would like to do is within that <script> have another function that calls close(), so something like:

function aNewFunction()
{
  close();
}

In the AlpineJS docs there's this example:

<div x-data="dropdown()">
    <button x-on:click="open()">Open</button>

    <div x-show="isOpen()" x-on:click.away="close()">
        // Dropdown
    </div>
</div>

<script>
    function dropdown() {
        return {
            show: false,
            open() { this.show = true },
            close() { this.show = false },
            isOpen() { return this.show === true },
        }
    }
</script>

Now what I would like to do is within that <script> have another function that calls close(), so something like:

function aNewFunction()
{
  close();
}

• javascript

1 Answer 1

dropdown().close

This will return close() if you want to call close then simply do something like this .

dropdown().close()