SimpleSense ESLint Config v3.2.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 (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>

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

← use-v-on-exact →