Currently, I am facing an issue with a form on my blog. The blog is represented as an object that contains multiple content objects within it. I seem to be experiencing some confusion because the reactivity of the content I add to the Array persists with the parent object, even though it's not explicitly defined as a ref.
Below is the Vue Component code:
<script setup lang="ts">
const blog = ref({
link: 'Link',
category: 'category',
title: 'title',
image: 'Image',
body: 'Body',
content: [] as any[]
})
let contentItem = {
parent: 'parent',
title: 'title',
image: 'Image',
code: 'Code',
body: 'Body',
}
// Add Content Item
function addContent(content: any) {
const item = content
blog.value.content.push(item)
}
</script>
<template>
<div class="flex p-8 text-slate-600 w-full flex-col gap-4 rounded">
<h4 class="font-bold text-red-50">Blog Content</h4>
<input type="text" v-model="contentItem.parent">
<input type="text" v-model="contentItem.title">
<input type="text" v-model="contentItem.image">
<textarea class="w-full h-[200px]" type="text" v-model="contentItem.code"> {{ contentItem.code }} </textarea>
<textarea class="w-full h-[200px]" type="text" v-model="contentItem.body"> {{ contentItem.body }} </textarea>
<button class="p-4 w-1/2 bg-slate-50" type="button" @click="addContent(contentItem)">Add Content</button>
</div>
</template>
`
I have attempted using "readonly" and also tried passing values to another object (as seen in the current code), yet I am still puzzled by why they end up being the same object. I am aware that the solution might be straightforward, but after researching, all I could find were methods to maintain reactivity in an array (which is the opposite of my current problem).