this-in-template.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/this-in-template	disallow usage of `this` in template	v3.13.0

vue/this-in-template

disallow usage of this in template

• ⚙️ This rule is included in "plugin:vue/vue3-recommended" and "plugin:vue/recommended".
• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

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>

🚀 Version

This rule was introduced in eslint-plugin-vue v3.13.0

🔍 Implementation

• Rule source
• Test source