JS.VUE.NO.RESTRICTED.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"]
}

{'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.

{'vue/no-restricted-v-bind': ['error']}

<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 or null. If null is specified, it matches v-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"] }

{'vue/no-restricted-v-bind': ['error', { argument: 'foo', modifiers: ['prop'] }]}

<template>
  <!-- GOOD -->
  <div :foo="x" />

  <!-- BAD -->
  <div :foo.prop="x" />
</template>

{ "argument": "foo", "element": "MyButton" }

{'vue/no-restricted-v-bind': ['error', { argument: 'foo', element: 'MyButton' }]}

<template>
  <!-- GOOD -->
  <CoolButton :foo="x" />

  <!-- BAD -->
  <MyButton :foo="x" />
</template>