将对象传递给组件并使其可变

Question

我想传递一个Contact对象给我的ContactDetailsComponent。
当然，我想重用这个组件来显示联系人，也想重用它来编辑联系人。

将对象作为道具传递可以找到，但我无法编辑它。

这就是我所尝试的:组件:

<template>
<el-input
:value="contact.firstName"
@input="$emit('update:contact', $event)"
/>
<el-input :value="contact.lastName"></el-input>
<el-input :value="contact.phone"></el-input>
<el-input :value="contact.email"></el-input>
<el-input :value="contact.description"></el-input>
</template>
<script>
export default {
name: "ContactDetails",
props: {
contact: Object
},
emits: ['update:contact'],
methods: {
}
}
</script>
<style scoped>
</style>

用法:

<template>
<h1>Contacts</h1>
<ContactDetails
v-model:contact="contact"
></ContactDetails>
<el-button @click="saveContact">save</el-button>
</template>
<script>
import ContactDetails from "@/components/ContactDetails";
import axios from "axios";
import {defaultErrorHandler} from "@/error";
export default {
name: "Contacts",
components: {ContactDetails},
data() {
return {
contact: {
id: null,
firstName: null,
lastName: null,
phone: null,
description: null,
email: null,
}
}
},
mounted() {
axios
.post(process.env.VUE_APP_BACKEND_URL + "contact/getById", 1)
.then(res => {
this.contact = res.data
})
.catch(defaultErrorHandler)
},
methods: {
saveContact() {
console.log(this.contact)
}
},
}
</script>

现在，当我在firstName字段中写一些东西时，我在控制台得到这个:

[Vue warn]: Invalid prop: type check failed for prop "contact". Expected Object, got String with value "FirstNamea". 
at <ContactDetails contact="FirstNamea" onUpdate:contact=fn > 
at <Contacts onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 

但是我不能更新联系人对象并返回它，我该怎么做呢

res.data的样子:

Object { id: 1, firstName: "FirstName", lastName: "LastName", email: "[e-mail]", description: "description", phone: "12345678" }

谢谢你的帮助。

PS:我正在使用元素框架。

Answer 1

好，把这个问题标记为已解决:

<template>
<el-input
:modelValue="contact.firstName"
@input="$emit('update:contact', {...contact, firstName: $event})"
/>
<el-input
:modelValue="contact.lastName"
@input="$emit('update:contact', {...contact, lastName: $event})"
/>
<el-input
:modelValue="contact.phone"
@input="$emit('update:contact', {...contact, phone: $event})"
/>
<el-input
:modelValue="contact.email"
@input="$emit('update:contact', {...contact, email: $event})"
/>
<el-input
:modelValue="contact.description"
@input="$emit('update:contact', {...contact, description: $event})"
/>
</template>
<script>
export default {
name: "ContactDetails",
props: {
contact: Object
},
emits: ['update:contact'],
methods: {
}
}
</script>
<style scoped>
</style>