Nuxt•7mo ago

Form data reset in <input /> tags

I have the following form: I want the data that the user inputs in the "input" tag fields to reset when the user leaves the page or submits the form. How do i do that?

                    <form @submit.prevent="purchase">
                        <div class="input-wrapper">
                            <input class="form-headline" :value="'Price: ' + paymentStore.price + ' $'" disabled />
                        </div>
                        <div class="input-wrapper">
                            <input class="form-headline" :value="'Sessions number: ' + paymentStore.sessionsNum"
                                disabled />
                        </div>
                        <div class="input-wrapper">
                            <input class="input-value" placeholder="0000 0000 0000 0000" />
                        </div>
                        <div class="inputs-in-line">
                            <div class="input-wrapper">
                                <input class="input-value" placeholder="12/12" />
                            </div>
                            <div class="input-wrapper">
                                <input class="input-value" placeholder="000" />
                            </div>
                        </div>
                        <button class="cta-button">Pay</button>
                    </form>

                    <form @submit.prevent="purchase">
                        <div class="input-wrapper">
                            <input class="form-headline" :value="'Price: ' + paymentStore.price + ' $'" disabled />
                        </div>
                        <div class="input-wrapper">
                            <input class="form-headline" :value="'Sessions number: ' + paymentStore.sessionsNum"
                                disabled />
                        </div>
                        <div class="input-wrapper">
                            <input class="input-value" placeholder="0000 0000 0000 0000" />
                        </div>
                        <div class="inputs-in-line">
                            <div class="input-wrapper">
                                <input class="input-value" placeholder="12/12" />
                            </div>
                            <div class="input-wrapper">
                                <input class="input-value" placeholder="000" />
                            </div>
                        </div>
                        <button class="cta-button">Pay</button>
                    </form>

2 Replies

SilverShade•7mo ago

the solution i came up with is the following: i bound each <input /> to a respective model, and i reset the model before the component gets unmounted: The question is: Is this a good practice and is there a better way to achieve the same result?

<input :v-model="cardNumber" class="input-value" placeholder="0000 0000 0000 0000" />

<input :v-model="cardNumber" class="input-value" placeholder="0000 0000 0000 0000" />

const cardNumber = ref("")

onBeforeUnmount(() => {
    cardNumber.value = ""
})

const cardNumber = ref("")

onBeforeUnmount(() => {
    cardNumber.value = ""
})

pyplacca•6mo ago

I don’t think that’s necessary if the component is being unmounted. The state is going to be lost anyway Are you experiencing any particular issue?

Gaming

Programming

Form data reset in <input /> tags