I am a newbie learning vuejs 3.
I am making an authorization form which should consist of several vue components.
In the authorization form there is an Email input component , which is passed an isError value if Email validation failed after submitting the form.
In the code of the InputOutline.vue component, I want the input element to change its style (e.g. the input element borders become red) if the Email is incorrect (after the form has already been submitted). After changing the input value (e.g. the user starts editing the previously incorrectly specified email) the input style should return to its original state (the borders of the input element should stop being red).
My implementation of the code with the isError parameter works, but the problem is that after resubmitting the form with a newly invalid email, the input style does not change (i.e. the input borders do not turn red as they did when the form was first submitted with an invalid email).
I know what the problem is. The problem is that the component doesn’t update the isError value after the form is submitted a SECOND time with invalid data.
But I don’t know how to make vuejs update all data of component after submitting a form.
Full Login.vue code:
<script setup>
import GuestLayout from '@/Layouts/GuestLayout.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import InputOutline from "@/Components/OutlineComponents/InputOutline.vue";
import InputOutlineError from "@/Components/OutlineComponents/InputOutlineError.vue";
defineProps({
status: {
type: String,
},
});
const form = useForm({
email: '',
});
const submit = () => {
form.post(route('login'), {});
};
</script>
<template>
<GuestLayout>
<Head title="Log in" />
<div v-if="status" class="mb-4 font-medium text-sm text-green-600">
{{ status }}
</div>
<form @submit.prevent="submit">
<div>
<InputOutline label="Email" type="email" v-model="form.email" required :isError="!!form.errors.email"/>
<InputOutlineError class="mt-2" :message="form.errors.email" />
</div>
<div class="flex items-center justify-end mt-4">
<PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
Log in
</PrimaryButton>
</div>
</form>
</GuestLayout>
</template>
Full InputOutline.vue code:
<script setup>
import {computed, ref} from "vue";
import {usePage} from "@inertiajs/vue3";
const model = defineModel({
type: String,
required: true
});
const input = ref(null);
defineProps({
type: {
type: String,
default: "text",
},
required: {
type: Boolean,
default: false,
},
label: {
type: String,
required: true,
},
isError:{
type: Boolean,
default: false,
},
supportDarkTheme:{
type: Boolean,
default: false,
},
});
</script>
<template>
<div class="relative">
<input :type="type" :required="required" v-model="model" ref="input" id="floating_outlined" placeholder=""
class="input-base block px-2.5 pb-2.5 pt-4 w-full
focus:outline-none focus:ring-0 peer"
:class="[supportDarkTheme ? 'dark:text-white dark:border-gray-600 dark:focus:border-blue-500' : '',
isError ? 'color-border-danger' : '',] "/>
<label for="floating_outlined"
class="label-base absolute duration-300 transform -translate-y-3.5 scale-75 top-1 z-10 origin-[0] px-1.5 cursor-text bg-white
peer-focus:px-1.5 peer-focus:color-text-focused peer-focus:top-1 peer-focus:scale-75 peer-focus:-translate-y-3.5
peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2
rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1"
:class="[
supportDarkTheme ? 'label-base-dark peer-focus:dark:bg-gray-900 peer-focus:dark:text-blue-500' : '',
isError ? 'color-text-danger' : '',] ">
{{label}}
</label>
</div>
</template>