So I have an Text Input that filled based on string that stored in cookies. Something like a Remember me. when I do the value binding the cookies using :value I can't type the new value although there is no cookie being stored.
here is the code
<template>
<GuestLayout class="bg-neutral">
<Head title="Log in" />
<div v-if="status" class="mb-4 font-medium text-sm text-white-600">
</div>
<form @submit.prevent="submit">
<div>
<InputLabel for="email" value="Email" />
<TextInput
id="email"
type="email"
class="mt-1 block w-full text-neutral-focus focus:border-accent"
v-model="form.email"
:value="rememberedEmail"
required
autofocus
autocomplete="username"
/>
<InputError class="mt-2" :message="form.errors.email" />
</div>
<div class="mt-4">
<InputLabel for="password" value="Password" />
<TextInput
id="password"
type="password"
class="mt-1 block w-full text-neutral-focus"
v-model="form.password"
required
autocomplete="current-password"
/>
<InputError class="mt-2" :message="form.errors.password" />
</div>
<div class="block mt-4">
<label class="flex items-center">
<Checkbox name="remember" v-model:checked="form.remember" />
<span class="ml-2 text-sm text-gray-600 dark:text-gray-400"
>Remember me</span
>
</label>
</div>
<div class="block mt-2">
<Link :href="route('register')">
<label class="flex items-center hover:cursor-pointer">
<span
class="ml-2 text-sm text-gray-600 dark:text-gray-400"
>Dont have an account ? Register here</span
>
</label>
</Link>
</div>
<div class="flex items-center justify-end mt-4">
<Link
v-if="canResetPassword"
:href="route('password.request')"
class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
>
Forgot your password?
</Link>
<PrimaryButton
class="ml-4"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
>
Log in
</PrimaryButton>
</div>
</form>
</GuestLayout>
</template>
<script>
import Checkbox from "@/Components/Checkbox.vue";
import GuestLayout from "@/Layouts/GuestLayout.vue";
import InputError from "@/Components/InputError.vue";
import InputLabel from "@/Components/InputLabel.vue";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import TextInput from "@/Components/TextInput.vue";
import { Head, Link, useForm } from "@inertiajs/vue3";
import { onUpdated } from "vue";
import VueCookies from "vue-cookies";
import { ref } from "vue";
import { onMounted } from "vue";
export default {
components: {
Head,
Checkbox,
GuestLayout,
InputError,
InputLabel,
PrimaryButton,
TextInput,
Link,
},
props: {
canResetPassword: Boolean,
status: String,
emailCookies: String,
},
setup() {
// const emailCookies = ref(VueCookies.get("email"));
let rememberedEmail = ref("");
onMounted(() => {
const emailCookies = ref(VueCookies.get("email"));
if (emailCookies != null) {
return (rememberedEmail = emailCookies);
} else {
return "";
}
});
const form = useForm({
email: "",
password: "",
remember: false,
});
const submit = () => {
form.post(route("login"), {
onFinish: () => form.reset("password"),
});
};
return { form, submit, rememberedEmail };
},
};
</script>
I've tried directly detect the cookies using :value="emailCookies" it still not letting me change the content of text input
How do I do to makes the input field is editable and it updated with email that stored in the cookies if there is any ?
Via Active questions tagged javascript - Stack Overflow https://ift.tt/ODfr7SN
Comments
Post a Comment