所以我有一个基于存储在cookie中的字符串填充的文本输入。像“记住我”之类的东西。
当我使用 :value 绑定(bind) cookie 的值时，尽管没有存储 cookie，但我无法输入新值。
这是代码
<template>
<GuestLayout class="bg-neutral">
<Head title="Log in" />
<div v-if="status" class="mb-4 font-medium text-sm text-white-600">
{{ status }}
</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>
我尝试使用:value="emailCookies"直接检测cookie它仍然不允许我更改文本输入的内容
如何使输入字段可编辑并使用存储在 cookie 中的电子邮件(如果有)进行更新？
最佳答案
这里的问题是您尝试在同一输入上使用 v-model 和 :value :
setup() {
const emailCookies = VueCookies.get("email");
let rememberedEmail = ref(emailCookies ? emailCookies : "");
const form = useForm({
email: rememberedEmail.value,
password: "",
remember: false,
});
const submit = () => {
form.post(route("login"), {
onFinish: () => form.reset("password"),
});
};
return { form, submit };
}
和文本输入:
<TextInput
id="email"
type="email"
class="mt-1 block w-full text-neutral-focus focus:border-accent"
v-model="form.email"
required
autofocus
autocomplete="username"
/>
关于javascript - V-model绑定(bind)总是重置文本输入Vue，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/76794755/