I want to update a custom property value inside a child component, and also want to get event whenever the value is changed.
So, I tried both v-model: and @update:, like this.
<CustomName v-model:custom-name="name"
@update:custom-name="nameChanged"/>
// CustomName.vue
<script>
export default {
name: 'CustomName',
props: {
customName: String
},
emits: ['update:customName'],
setup(_, {emit}) {
const customNameChanged = (event) => {
emit('update:customName', event.target.value)
}
return {
customNameChanged
}
}
}
</script>
<template>
<input :value="customName" @change="customNameChanged"/>
</template>
I expected that name is changed and nameChanged is called,
but name is not changed.
I tried some cases at the vue sfc playground.
The result is,
(1) When I use camelCase, value is updated and method is called.
<CustomName v-model:customName="name4"
@update:customName="nameChanged"/>
(2) But when I use kebab-case, value is NOT changed and method is called.
<CustomName v-model:custom-name="name3"
@update:custom-name="nameChanged"/>
(3) Without @update:, camelCase and kebab-case are worked well.
<CustomName v-model:custom-name="name1"/>
<CustomName v-model:customName="name2"/>
Is this right? Is it illegal to use v-model with @update? Or should I use camelCase?