pageClass | sidebarDepth | title | description | since |
---|---|---|---|---|
rule-details |
0 |
vue/no-restricted-custom-event |
disallow specific custom event |
v7.3.0 |
disallow specific custom event
This rule allows you to specify custom event that you don't want to use in your application.
This rule takes a list of strings, where each string is a custom event name or pattern to be restricted:
{
"vue/no-restricted-custom-event": ["error", "input", "/^forbidden/"]
}
<template>
<!-- ✗ BAD -->
<input @input="$emit('input', $event.target.value)">
<!-- ✗ GOOD -->
<input @input="$emit('update:value', $event.target.value)">
</template>
<script>
export default {
methods: {
handleChangeValue(newValue) {
/* ✗ BAD */
this.$emit('input', newValue)
this.$emit('forbiddenEvent')
/* ✓ GOOD */
this.$emit('foo')
this.$emit('bar')
}
}
}
</script>
Alternatively, the rule also accepts objects.
{
"vue/no-restricted-custom-event": ["error",
{
"event": "input",
"message": "If you intend a prop for v-model, it should be 'update:modelValue' in Vue 3.",
"suggest": "update:modelValue"
},
]
}
The following properties can be specified for the object.
event
... Specify the event name or pattern.message
... Specify an optional custom message.suggest
... Specify an optional name to suggest changes.
<template>
<!-- ✗ BAD -->
<input @input="$emit('input', $event.target.value)">
</template>
<script>
export default {
methods: {
handleChangeValue(newValue) {
/* ✗ BAD */
this.$emit('input', newValue)
}
}
}
</script>
This rule was introduced in eslint-plugin-vue v7.3.0