Vue.js3 - Reaonly on nested object

user_9818704 0
Viewed 107

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: 'bob@so.com'
  })

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

  return { input, args }
}

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

vue-reactivity vue.js javascript
2 Answers

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,
  }
})
user_98187040

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: 'bob@so.com'
  })

  const args =readonly(input)
user_81728570
Related