CODEWITHSUNDEEP
javascriptvue.jseslintnuxt.js
TheWardedCoder
TheWardedCoder

Reputation: 99

Unexpected usage of 'this' es-lint error, what rule to disable?

I am using Nuxt configured with el-lint and prettier but all of a sudden its throwing up an error when I use a 'this' within my template.

 6:15  error  Unexpected usage of 'this'  vue/this-in-template
 7:15  error  Unexpected usage of 'this'  vue/this-in-template
 11:15  error  Unexpected usage of 'this'  vue/this-in-template
 12:15  error  Unexpected usage of 'this'  vue/this-in-template

I am trying to rewrite my .eslintrc.js file but I cannot find the rule that will allow me to bypass this es-lint error.

I know the code is working because I can see the result in the background pass the overlay.

<template>
 <div class="slugWrapper">
    <h1>this is {{ $route.params.slug }}</h1>
     <div class="card">
      <video 
       v-if="this.cards[0].type == 'Video'" 
       :src="this.cards[0].imageurl" 
       class="card__video" 
      @click="playPause" />
     <img 
       v-if="this.cards[0].type=='Image'|| 'image/jpeg'" 
      :src="this.cards[0].imageurl" 
      class="card__image" 
      alt="Image">
   </div>
 </div>

I need a rule or a way to ignore es lint in this area

Upvotes: 0

Views: 1936

Answers (1)

Robert Cooper
Robert Cooper

Reputation: 2250

If you want to disable this rule, you need to ignore the vue/this-in-template rule in your .eslintrc file:

{
  "plugins": ["vue"],
  "rules": {
      "vue/this-in-template": "off"
  }
}

You will probably need eslint-plugin-vue installed as a dependency to ignore this rule.

That being said, this rule is probably there for a reason, so you might want to consider refactoring your code so that you don't need to use this in your Vue templates.

Upvotes: 3

Related Questions