[Vuejs]-Pass props to modal form, update, submit with Composition api Vue 3

by

0👍

✅

Props can’t be modified shallowly like props.foo =, and shouldn’t be modified deeply like props.foo.bar =. The only suitable way is to send an event to parent component where a value that is passed through a prop exists, so it could modify it for a child. This is what v-model does.

There’s no way how useVModel(props, 'foo') function could be written to work like that, because the arguments it’s provided with only allow to modify props.foo, which is readonly. In order to make it work, useVModel needs to implement two-way binding, so an event with updated value could be changed in a parent, so it needs to be able to send events. This is what the documentation lists:

const data = useVModel(props, 'data', emit)

console.log(data.value) // props.data
data.value = 'foo' // emit('update:data', 'foo')

The example with ref won’t work because props.customer.name is accessed directly inside setup function, this breaks the reactivity and also results in an error in case props.customer === undefined at this moment.

Leave a comment