How to use .value on reactive nested objects in Vue 3's Composition API?

Question

I'm wondering where it's correct to use .value when referencing reactive objects if they are nested 2+ levels deep. Do you put .value on the base object and then access sub-keys off that? Or do you put it on the deepest key?

Here is an example:

import { reactive, computed } from 'vue'

const someObj = reactive({
    a: {
        b: {
            c: 1
        }
    }
})

const doubleSomeObj = computed(() => {
    return someObj.value.a.b.c * 2
    // Or... someObj.a.b.c.value * 2
    // Or something else?
})

In the above code, in the computed property doubleSomeObj, it references the nested object someObj.

When referencing the various keys in that nested object someObj, at what level is it correct to put .value?

tony19 · Accepted Answer · 2020-09-10 03:16:51Z

3

.value is only used on refs. The reactive object's subproperties can be used without employing .value, so you could just directly multiply it in your computed prop:

const doubleSomeObj = computed(() => {
    return someObj.a.b.c * 2
})

demo

answered Sep 10, 2020 at 3:16

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use .value on reactive nested objects in Vue 3's Composition API?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related