如何解决在 Ionic Vue 方法的嵌套范围内定义“this”时出现的 ESLint 错误

Question

我有一个 Ionic Vue 应用程序，它使用 slides 组件在每次转换时修改反应式属性。相关代码是这样的：

<script lang="ts">
import { IonPage, IonContent, IonSlides, IonSlide,} from '@ionic/vue'

export default {
  name: 'Splash',
  components: { IonPage, IonContent, IonSlides, IonSlide,},
  data() {
    return {
      contentClass: 'bg-gradient-1',
    }
  },
  setup() {
    const slideOpts = {
      autoplay: {
        delay: 4000,
      },
    }    
    return { slideOpts }
  },
  methods: {
    slideChange({ target }) {
      const vm = this
      target.getActiveIndex().then((i) => {
        vm.contentClass = 'bg-gradient-' + i
      })
    },
  },
}
</script>

这会产生以下错误：

Unexpected aliasing of 'this' to local variable @typescript-eslint/no-this-alias

我使用const vm = this的原因是因为一旦进入getActiveIndex方法，this的范围发生变化，我无法修改contentClass数据属性.

与其盲目地禁用 ESLint 规则以允许将 this 分配给常量，我想知道是否有人能够提供 better/proper 解决方案？

非常感谢。

Answer 1

是的，只有一种解决方案。您可以在 ESlint 配置文件中添加以下对象

{
  "@typescript-eslint/no-this-alias": [
    "error",
    {
      "allowDestructuring": true, // Allow `const { props, state } = this`; false by default
      "allowedNames": ["vm"] // Allow `const vm= this`; `[]` by default
    }
  ]
}

有关更多信息，请查看 TSLint：no-this-assignment

Answer 2

也可以通过不使用 data 并使用 setup 方法

来解决它

<script lang="ts">
import { IonPage, IonContent, IonSlides, IonSlide,} from '@ionic/vue'

export default {
  name: 'Splash',
  components: { IonPage, IonContent, IonSlides, IonSlide,},
  setup() {
    const contentClass = ref<any>('bg-gradient-1');
    const slideChange = ({ target }) => {
      target.getActiveIndex().then((i) => {
        contentClass.value = 'bg-gradient-' + i
      })
    },
    const slideOpts = {
      autoplay: {
        delay: 4000,
      },
    }    
    return { slideOpts, contentClass, slideChange }
  }
}
</script>

如何解决在 Ionic Vue 方法的嵌套范围内定义“this”时出现的 ESLint 错误

How to resolve ESLint error in defining `this` inside nested scope in Ionic Vue method

typescript

vue.js

ionic-framework

eslint

ionic5