alpine.js - populating form data with button

Question

I am trying to use alpine.js to update a form's action, and am running into some confusion.

My code:

<div x-data="data=''">
    <template x-if="data.url">
        <div>
            <form method=POST :action="data.url">
                <input type="text" x-model="data.sitenumber">
                <button type="submit">Submit form</button>
            </form>
        </div>
    </template>
    <input type="button" value="add data" @click="data = {url: 'www.com', sitenumber: 23}">
</div>

When I click on the button, the div form doesn't appear. My ultimate goal is to have a modal popup that is dynamically updated with an action button (delete record, etc.) when a link/button elsewhere in the document is clicked.

I tried following long with this ToDo app tutorial, but this creates a separate function, and I thought it would be possible to pass simple data variables to a different part of the div, especially since I'm not looping through an array.

Thanks!

the form is never visible, because data.url is initially always empty — derRobert

Hugo Hugo · Accepted Answer · 2020-04-29T15:31:05

I think the issue is that you do x-data="data=''" instead of using object initialisation syntax: x-data="{ data: '' }"

alpine.js - populating form data with button

1 Answers