# 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 (opens new window) 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>

Now loading...

# 🔧 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>

Now loading...

# 🚀 Version

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

# 🔍 Implementation

← vue/order-in-components vue/block-tag-newline →