In vue 3, can I use both v-model:custom-property and @update:custom-property?

Viewed 170

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?

0 Answers
Related