V-model绑定总是重置文本输入Vue

pkln4tw6 于 2023-08-07 发布在 Vue.js

关注(0)|答案(1)|浏览(161)

所以我有一个Text Input，它是根据存储在cookie中的字符串填充的。就像记住我。当我使用:value绑定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中的电子邮件进行更新？

vue.js

来源：https://stackoverflow.com/questions/76794755/v-model-binding-always-reset-text-input-vue

1条答案

按热度按时间

2ledvvac1#

这里的问题是，你试图在同一个输入上同时使用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：

<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"
/>

型

赞(0）回复(0）举报 2023-08-07

我来回答

V-model绑定总是重置文本输入Vue

1条答案

相关问题

热门标签

最新问答