如何解决Ionic Vue方法中嵌套作用域内定义'this'时的ESLint错误

aurhwmvo 于 2022-12-08 发布在 Ionic

关注(0)|答案(3)|浏览(447)

我有一个Ionic Vue应用程序，它使用slides组件在每次转换时修改React属性。相关代码如下：

<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的data属性。
与其盲目地禁用ESLint规则以允许将this分配给一个常量，我想知道是否有人能够提供更好/适当的解决方案？
多谢了。

ionic-framework

来源：https://stackoverflow.com/questions/65884506/how-to-resolve-eslint-error-in-defining-this-inside-nested-scope-in-ionic-vue

3条答案

按热度按时间

inn6fuwd1#

是的，有一个解决方案。您可以在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

赞(0）回复(0）举报 2022-12-08

63lcw9qa2#

我也可以通过不使用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>

赞(0）回复(0）举报 2022-12-08

j0pj023g3#

In .eslintrc file on rules key add "@typescript-eslint/no-this-alias": 0 , for example in my case:

"rules": {
        "@typescript-eslint/no-var-requires": 0,
        "@typescript-eslint/no-explicit-any": 0,
        "@typescript-eslint/no-this-alias": 0,
        "no-console": 1, // Means warning
        "prettier/prettier": 2 // Means error
    }

赞(0）回复(0）举报 2022-12-08

我来回答

如何解决Ionic Vue方法中嵌套作用域内定义'this'时的ESLint错误

3条答案

相关问题

热门标签

最新问答