this-in-template.md

Pattern: Use of this in template

Issue: -

Description

This rule aims at preventing usage of this in Vue templates.

<template>
  <!-- ✓ GOOD -->
  <a :href="url">
    {{ text }}
  </a>
  
  <!-- ✗ BAD -->
  <a :href="this.url">
    {{ this.text }}
  </a>
</template>

Options

{
  "vue/this-in-template": ["error", "always" | "never"]
}

• "always" ... Always use this while accessing properties from Vue.
• "never" (default) ... Never use this keyword in expressions.

"always"

<template>
  <!-- ✓ GOOD -->
  <a :href="this.url">
    {{ this.text }}
  </a>
  
  <!-- ✗ BAD -->
  <a :href="url">
    {{ text }}
  </a>
</template>

Further Reading

• eslint-plugin-vue - this-in-template