SilverShade
Explore posts from serversForm 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>
3 replies
Display HTTP POST response error in a component
Hey guys, i'm completely new to frontend development, so i need help with some basic stuff.
I send a POST request to my backend API and i somehow need to handle the API response: On success i want to redirect the user to a different page, and on error i want to display the error in my component. How do i do that?
<template>
<div class="form-wrapper">
<div class="form">
<div class="content">
<div class="heading-1">Register</div>
<div class="inputs">
<form @submit.prevent="submitForm">
<div class="input-wrapper">
<input type="email" v-model="formData.email" id="email" class="input-value"
placeholder="Email" />
</div>
<div class="input-wrapper">
<input type="password" v-model="formData.password" id="password" class="input-value"
placeholder="Password" />
</div>
<div class="input-wrapper">
<input type="password" id="confirm-password"
class="input-value" placeholder="Confirm password" />
</div>
<button type="submit" class="cta-button">Register</button>
</form>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
definePageMeta({
layout: 'register'
})
const formData = ref({
email: '',
password: '',
})
const submitForm = async () => {
const config = useRuntimeConfig()
const data = await $fetch(config.public.apiBase + '/register', {
method: 'post',
body: {
"email": formData.value.email,
"password": formData.value.password
}
})
}
</script>
<template>
<div class="form-wrapper">
<div class="form">
<div class="content">
<div class="heading-1">Register</div>
<div class="inputs">
<form @submit.prevent="submitForm">
<div class="input-wrapper">
<input type="email" v-model="formData.email" id="email" class="input-value"
placeholder="Email" />
</div>
<div class="input-wrapper">
<input type="password" v-model="formData.password" id="password" class="input-value"
placeholder="Password" />
</div>
<div class="input-wrapper">
<input type="password" id="confirm-password"
class="input-value" placeholder="Confirm password" />
</div>
<button type="submit" class="cta-button">Register</button>
</form>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
definePageMeta({
layout: 'register'
})
const formData = ref({
email: '',
password: '',
})
const submitForm = async () => {
const config = useRuntimeConfig()
const data = await $fetch(config.public.apiBase + '/register', {
method: 'post',
body: {
"email": formData.value.email,
"password": formData.value.password
}
})
}
</script>
3 replies