javascript - 意外使用 'this' es-lint 错误，要禁用什么规则？

Question

我正在使用配置了 el-lint 和 prettier 的 Nuxt，但是当我在模板中使用“this”时，它突然抛出错误。

 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

我正在尝试重写我的 .eslintrc.js 文件，但我找不到允许我绕过此 es-lint 错误的规则。

我知道代码正在运行，因为我可以通过叠加层在后台看到结果。

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

我需要一个规则或方法来忽略该区域的 es lint

Answer 1

如果您想禁用此规则，则需要忽略 .eslintrc 文件中的 vue/this-in-template 规则:

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

您可能需要将 eslint-plugin-vue 安装为依赖项才能忽略此规则。

话虽这么说，这条规则的存在可能是有原因的，所以你可能需要考虑重构你的代码，这样你就不需要在 Vue 模板中使用 this 了。