为什么我在 Vue 3 表单中绑定的数据在通过函数打印在控制台上时没有更新？
P粉354602955
2023-09-04 11:50:33
<p>我在 Vue 3 中创建了一个表单组件，我试图将引用对象绑定到输入元素，根据我对双向绑定的理解以及 Vue 在我过去的作品中的行为方式，我预计任何更改都会影响我的引用立即对象，而不需要任何操作，就像我必须通过触发“onChange”反应事件来处理 React 组件一样。</p>
<p>但是，当我单击“保存”按钮来触发输出引用对象的函数时，它似乎只保留最初加载的值，而不保留我在输入中所做的任何更改。谁能解释一下为什么吗？</p>
<p>这是我的组件的代码。它会在弹出窗口中加载。</p>
<pre class="brush:php;toolbar:false;"><script setup lang="ts">
import type { Activity } from '@/models/activity';
import { ref } from "vue";
import Button from '../../common/Button.vue';
defineEmits([
"close-form"
]);
const props = defineProps<{
title?: String,
activity?: Activity,
editMode: Boolean
}>();
const initialState = props.activity ?? {
id: '',
title: '',
category: '',
description: '',
date: '',
city: '',
venue: ''
}
const currActivity = ref<Activity>(initialState);
const handleSubmit = () => {
console.log(currActivity.value);
}
// const handleInputChange = (event: Event) => {
// const {name, value} = event.target as HTMLInputElement;
// console.log(name, value);
// // currActivity.value[name] = value;
// }
</script>
<template>
<form
class="grid grid-cols-5 gap-4 mb-8"
@submit="handleSubmit"
autocomplete="off"
>
<h2
v-if="title"
class="col-span-5 mb-4 text-white text-3xl font-semibold"
>
{{ title }}
</h2>
<input type="text" placeholder='Title' class='col-span-3 mb-4 px-2 py-1 rounded' :value="currActivity.title" name="title" />
<input type="text" placeholder='Category' class='mb-4 px-2 py-1 rounded' :value="currActivity.category" name="category" />
<textarea placeholder='Description' class='col-span-5 mb-4 px-2 py-1 rounded' :value="currActivity.description" name="description" />
<input type="text" placeholder='Date' class='px-2 py-1 rounded' :value="currActivity.date" name="date" />
<input type="text" placeholder='City' class='px-2 py-1 rounded' :value="currActivity.city" name="city" />
<input type="text" placeholder='Venue' class='px-2 py-1 rounded' :value="currActivity.venue" name="venue" />
<div
v-if="editMode && activity"
class="flex justify-end col-span-2"
>
<Button
text="Save"
icon="fa-floppy-disk"
type="send"
@click="handleSubmit"
/>
<Button
text="Close"
icon="fa-xmark"
type="cancel"
@click="$emit('close-form')"
/>
</div>
<div
v-else
class='flex justify-end col-span-2'
>
<Button
text="Post"
icon="fa-paper-plane"
type="send"
@click="handleSubmit"
/>
</div>
</form>
</template></pre>
<p>您可能会注意到我的脚本中的注释函数。我尝试复制 React 方法并处理使用输入元素上的“@change”触发的更改事件的更改。后来我删除了它们，因为这似乎不起作用。我保留了评论功能，但以防万一有人发现它有助于查找问题。</p>
您需要使用
v-model而不是:value进行双向绑定：<input type="text" placeholder='Title' class='col-span-3 mb-4 px-2 py-1 rounded' v-model="currActivity.title" name="title" />