Estoy tratando de crear una función en la que los usuarios puedan agregar varias publicaciones de currículum (desde el componente secundario) a una matriz (en el elemento principal). El problema es que cada objeto que envío a la matriz principal se mantiene reactivo con el formulario/objeto secundario. Entonces, si, por ejemplo, borro el formulario en el componente secundario, el Objeto que empujé a la matriz principal también borra todos sus valores. ¿Cómo emito y empujo el objeto posterior a la matriz principal y evito que sea reactivo, para poder agregar nuevas / más publicaciones de currículum?
CreateProfile.vue
<template> <ResumePostInput :resume_posts="form.resume_posts" @resumeHandler="handleResume"/> </template> <script> export default { data() { form: { resume_posts: [] } } methods: { handleResume(post) { this.form.resume_posts.push(post) } } } </script>ResumePostInput.vue
<template -- Input fields binded to post object -- </template> <script> export default { emits: ["resumeHandler"], props: { resume_posts: Array }, data() { return { post: { title: '', sub_title: '', text: '', year_from: '', year_to: '', type: '' } } }, methods: { addResume() { this.$emit("resumeHandler", this.post) } } } </script>emites una propiedad desconocida, es una post , no posts
y aprenda sobre el objeto JS, hay copia por referencia y valor
tal vez solo necesite actualizar su método addResume de esta manera
addResume() { const post = JSON.parse(JSON.stringify(this.post)) this.$emit("resumeHandler", post) }El problema no es que el objeto sea reactivo, sino que es el mismo objeto porque los objetos se pasan por referencia en JavaScript. Si se modifica en un lugar, se modifica en todas partes.
Para evitar esto, el objeto debe copiarse explícitamente. Para objetos poco profundos, esto se puede hacer con la dispersión de objetos:
this.$emit("resumeHandler", {...this.post})Para objetos profundamente anidados, se pueden usar pliegos múltiples o la función de clonación de terceros.