# vue/no-restricted-v-bind
disallow specific argument in
v-bind
# 📖 Rule Details
This rule allows you to specify v-bind argument names that you don't want to use in your application.
# 🔧 Options
This rule takes a list of strings, where each string is a argument name or pattern to be restricted:
{
"vue/no-restricted-v-bind": ["error", "/^v-/", "foo", "bar"]
}
<template>
<!-- ✗ BAD -->
<div v-bind:foo="x" />
<div :bar="x" />
</template>
By default, '/^v-/' is set. This prevents mistakes intended to be directives.
<template>
<!-- ✗ BAD -->
<MyInput :v-model="x" />
<div :v-if="x" />
</template>
Alternatively, the rule also accepts objects.
{
"vue/no-restricted-v-bind": ["error",
{
"argument": "/^v-/",
"message": "Using `:v-xxx` is not allowed. Instead, remove `:` and use it as directive."
},
{
"argument": "foo",
"message": "Use \"v-bind:x\" instead."
},
{
"argument": "bar",
"message": "\":bar\" is deprecated."
}
]
}
The following properties can be specified for the object.
argument... Specify the argument name or pattern ornull. Ifnullis specified, it matchesv-bind=.modifiers... Specifies an array of the modifier names. If specified, it will only be reported if the specified modifier is used.element... Specify the element name or pattern. If specified, it will only be reported if used on the specified element.message... Specify an optional custom message.
# { "argument": "foo", "modifiers": ["prop"] }
<template>
<!-- ✓ GOOD -->
<div :foo="x" />
<!-- ✗ BAD -->
<div :foo.prop="x" />
</template>
# { "argument": "foo", "element": "MyButton" }
<template>
<!-- ✓ GOOD -->
<CoolButton :foo="x" />
<!-- ✗ BAD -->
<MyButton :foo="x" />
</template>
# 👫 Related Rules
# 🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0