When I attempt to utilize a child component with custom form inputs and emit those values to the parent component, I encounter an issue where one input value disappears when another input value is entered. Let me showcase some code:
Child Component
<template>
<input
type="text"
@input="setField($event.target.value, 'title')"
/>
<wysiwyg-input
@change="(text) => setField(text, 'content')"
/>
</template>
<script>
export default {
methods: {
setField(value, field) {
this.$emit("input", {
title: field === "title" && value,
content: field === "content" && value,
});
},
},
}
</script>
Parent Component
<template>
<FormFields v-model="blogPost" />
</template>
<script>
export default {
data() {
return {
blogPost: {},
};
},
watch: {
blogPost(val) {
console.log(val);
},
},
};
</script>
In this scenario, entering content causes the title field to become false. How can I modify the condition in the child component so that both inputs can be emitted to the parent component? Alternatively, do you have any other ideas to achieve the same goal?
CodeSandbox link: https://codesandbox.io/s/mystifying-benz-w8wgu?file=/src/App.vue