Create a "reset" helper that resets all state to the state originally defined in x-data

[aaronbushnell]

Sometimes when I have a big form I need a way to "reset" all the form data to what I had originally defined in my x-data directive. Something like the following would be really nice!

<div x-data="{ answer_1: 'yes', answer_2: 'no', answer_3: null }">

    <input type="radio" name="item_1" value="yes" x-model="answer_1" /> Yes
    <input type="radio" name="item_1" value="no" x-model="answer_1" /> No

    <input type="radio" name="item_2" value="yes" x-model="answer_2" /> Yes
    <input type="radio" name="item_2" value="no" x-model="answer_2" /> No

    <input type="radio" name="item_3" value="yes" x-model="answer_3" /> Yes
    <input type="radio" name="item_3" value="no" x-model="answer_3" /> No

    <!-- Clicking this button swaps the x-data state to the initially defined values -->
    <button @click="$reset()">Reset</button>

</div>

Edit: Modified example to be clearer why form.reset() doesn't entirely help

[ekwoka]

You can use the normal form.reset method, and use the reset data to refeed into the x-data without much issue.

🤔

[aaronbushnell]

Unfortunately, using form.reset() will just wipe out the values of all your fields, it won't change the x-data assignment back to the original values! Here's a demo: https://codepen.io/aaronbushnell/pen/jEOwOKQ

[SimoTod]

Ideally you would just put the checked attributes and values for inputs when you generate the HTML on the backend so the native reset works but if you want a frontend only solution, you can have something like https://codepen.io/SimoTod/pen/MYWobGr

Note, this is a simplified example and you need to use the spread operator so the cache doesn't refer the same objects but it creates an actual copu. If you have nested levels it will not work as expected.

[lonix1]

I posted a solution on StackOverflow.