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

Question

我正在使用配置有 el-lint 和更漂亮的 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

如果要禁用此规则，则需要忽略文件中的vue/this-in-template规则.eslintrc：{&nbsp; "plugins": ["vue"],&nbsp; "rules": {&nbsp; &nbsp; &nbsp; "vue/this-in-template": "off"&nbsp; }}您可能需要将其eslint-plugin-vue安装为依赖项才能忽略此规则。话虽如此，这条规则的存在可能是有原因的，所以你可能需要考虑重构你的代码，这样你就不需要this在你的 Vue 模板中使用。