Passing an Object to component and make I mutable

Viewed 318

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.

1 Answers

Ok, just to mark this question as solved:

<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>
Related