noVueThisInTemplate (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueThisInTemplate
This rule has an unsafe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/this-in-template

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueThisInTemplate": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow this in Vue templates.

Vue templates can read the properties of the component directly. Writing this.count in a template does the same thing as writing count, so this only adds noise.

The rule doesn’t report this.name when writing name alone would mean something else, for example when a v-for or v-slot variable, or a function parameter, has the same name.

Examples

Invalid

1
<template>
2
  <a :href="this.url">{{ text }}</a>
3
</template>

1
<template>
2
  <p>{{ this.text }}</p>
3
</template>

1
<template>
2
  <button @click="this.count++">Add</button>
3
</template>

Valid

1
<template>
2
  <a :href="url">{{ text }}</a>
3
  <button @click="count++">Add</button>
4
  <!-- `item` alone would be the `v-for` variable. -->
5
  <p v-for="item in items">{{ this.item }}</p>
6
</template>