Why can't I set the property of an object?

I've created an object with two properties and I'm now trying to set one of those properties but I can't seem to do so. This is so simple but I just can't see what I'm doing wrong.

<script setup>

const formObject = ref({
    description: 'default description',
    property_issue: 'default issue'
})

const openForm = () => {
    formObject.property_issue = 'Changing the issue';
    formObject.description = 'Changing the description';
}
</script>

When I pass the formObject to my component, it still has the original default values.

A console.log of the formObject reveals that values have been set but not where I thought they would be:

Object { __v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: {…}, _value: Proxy, property_issue: "Changing issue", description: "Changing description" }

__v_isRef: true

__v_isShallow: false

_rawValue: Object { description: "default description", property_issue: "default issue" }

_value: Proxy { <target>: {…}, <handler>: {…} }

dep: Set [ {…} ]

description: "Changing description"

property_issue: "Changing issue"

<prototype>: Object { … }
Index2.vue:150:13

What am I doing wrong?

danielcoimbra

2 years ago

Best Answer

Level 12

Have you tried to add .value to change the values?

Something like this should work:

<script setup>
import { ref } from 'vue'

const formObject = ref({
    description: 'default description',
    property_issue: 'default issue'
})

const openForm = () => {
    formObject.value.property_issue = 'Changing the issue'
    formObject.value.description = 'Changing the description'
}
</script>

1 like

HotelCalifornia

2 years ago

Level 1

@danielcoimbra I can't believe it. I'd previously tried:

formObject.property_issue.value = 'Changing the issue'

Why is it that in my child component I can refer to the values as:

{{ formObject.property_issue }}

Why isn't it:

{{ formObject.value.property_issue }}

danielcoimbra

2 years ago

Level 12

@HotelCalifornia In your Component's <template> you can refer to the values directly {{ formObject.property_issue }}. But inside <script>, you must use formObject.value.property_issue to get or change the original value.

Hope it helps :)

Please or to participate in this conversation.