Vue.js3 - Reaonly on nested object

Question

Is there any way using the new Vue.js Reactivity API to bind an object key to an existing Ref value as readonly?

Example.

setup() {
  const input = ref({
    firstName: 'Bob',
    email: '[email protected]'
  })

  const args = {
    postID: 32,
    email: readonly(input.value.email)
  }

  return { input, args }
}

This doesn't work.
args.email doesn't get updated.

Quentin · Accepted Answer · 2021-01-23 06:44:25Z

3

As @boussadjra-brahim pointed out, readonly can't be used for nested fields.
Only workaround without copying the whole object might be using computed then.

const args = computed(() => {
  return {
    post_id: 32,
    email: input.value.email,
  }
})

answered Jan 23, 2021 at 6:44

Quentin

3,2991 gold badge17 silver badges33 bronze badges

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

Comments

Boussadjra Brahim · Accepted Answer · 2021-01-22 15:55:23Z

1

Readonly accepts a property created using ref or reactive not a nested field in that property in order to be reactive:

 const input = ref({
    firstName: 'Bob',
    email: '[email protected]'
  })

  const args =readonly(input)

answered Jan 22, 2021 at 15:55

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

2 Comments

Quentin Over a year ago

I don't necessarily want to use readonly for the whole object in this situation. Using computed might be a better solution then I guess.

Boussadjra Brahim Over a year ago

I just mentioned that, in this case readonly looks useless, it's recommended to use computed as you did since it's reactive and immutable

Collectives™ on Stack Overflow

Vue.js3 - Reaonly on nested object

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related