Is it @update:model-value or @update:modelValue

[frederikheld]

Ever since Vue3 changed the way the v-model is being passed, I'm in constant confusion about whether it is correct to write @update:model-value or @update:modelValue because the official docs tell me different things:

1. Vue3 migration guide in favor of @update:modelValue: https://v3-migration.vuejs.org/breaking-changes/v-model.html
2. The docs for the component v-model use @update:model-value on the component but update:modelValue in the defineEmits: https://vuejs.org/guide/components/v-model.html
3. The docs for Vuetify (e.g. for v-dialog) call the event update:modelValue: https://vuetifyjs.com/en/api/v-dialog/#events (and I expect a component library to call it like you would use it on the component tag but idk)

I know that in JS we use the camel case modelValue. But what should I use on the component tag? And how should I call it in the defineEmits and emit functions? Like I use it on the component tag (kebab-case) or like I use it in the code (camelCase)?

This is super confusing and not very clear.

This is my closest guess:

Component "MyThingy.vue":

<script setup>
const props = defineProps({
  modelValue: string
})

const emit = defineEmits('update:modelValue')
</script>

<template>
  <button @click="emit('update:modelValue', 'bar')">Change value</button>
</template>

Parent component:

<script setup>
import { ref } from 'vue'
import MyThingy from './MyThingy.vue'

const thingyValue = ref('foo')
</script>

<template>
  <MyThingy :model-value="thingyValue" @update:model-value="value => thingyValue = value" />
</template>

Is this correct?

[Disservin]

• camel case in the component itself (defintion and emit)
• kebab-case in the parent component's html, you also want to do my-thingy instead of MyThingy

[frederikheld]

you also want to do my-thingy instead of MyThingy

Really? I never had issues with that and no linter ever complained about it.

The docs are (again) not very clear to me which should be used in which situation: https://vuejs.org/guide/essentials/component-basics.html It starts with PascalCase examples and then states one situation in which kebab-case should be used.

I don't know what "authoring your template directly in the DOM" means, but I'm doing SFC's and it's recommended to use PascalCase in those.

Also, if you scroll down in the components basics documentation, you'll find examples for defineEmits and emit where they use kebab case, which only adds to my confusion: https://vuejs.org/guide/essentials/component-basics.html#listening-to-events The example is not about modelValue, but I expect modelValue to work in the same way than the other props and emits.

[robert-wloch-iits]

I'm upvoting this as I'm just in a dependency update and received this eslint error:
[lint:eslint] 77:27 warning Attribute 'v-model:showForm' must be hyphenated vue/attribute-hyphenation

So I've fixed the issue in the code and see right below @update:modelValue camel cased without eslint complaining. This is confusing as to why it is wrong in v-model and "okay" in @update:modelValue?

    <ComponentA v-model:show-form="modalActive" @toggle-modal="toggleModal" />
    <ComponentB v-model="criteria.value" @update:modelValue="onCriteriaUpdate" />

[hecticme]

The rule vue/attribute-hyphenation does not affect events, that's why ESLint didn't complain. For @update:modelValue to receive the same treatment, you should use v-on-event-hyphenation. This is just about which rules you have set up for eslint-plugin-vue.

[elambro]

@hecticme Any idea why v-on-event-hyphenation would be in vue3-strongly-recommended if it goes against the docs?

[hecticme]

@elambro

Not sure what documents you're referring to but, as far as I'm concerned, it's recommended to use kebeb-case in template (Reference). It is "strongly recommended" probably because it is useful to keep the code style consistent, and because camelCase can't be used with in-DOM templates.

It's just an ESLint rule which you can configure so I wouldn't say that the rule goes against something. As long as you're using Vue with a build step, this rule is just a matter of stylistic.