I want pass an Contact object to my ContactDetailsComponent.
Of course I want to reuse the compoent for showing but also for editing a Contact.
Passing the object as a Prop works find, but I can't manage to edit it.
This is what I tried: Component:
<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>
Usage:
<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>
I now when I write something in the firstName field I get this at the console:
[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<
But I can't update the contact object and return it, how should I do this.
This is how res.data looks:
Object { id: 1, firstName: "FirstName", lastName: "LastName", email: "test@test.net", description: "description", phone: "12345678" }
Thank you for your help.
PS: I am using the element-framework.