Vuetify Rules Typescript 参考 Data() 值

【问题标题】：Vuetify Rules Typescript with reference to Data() valuesVuetify Rules Typescript 参考 Data() 值
【发布时间】：2020-04-20 16:29:21
【问题描述】：

即

data() { 
  return { 
    bar: false 

    rules: { 
      foo: (value) => {
         if (this.bar) {}
        }
     }
  }
}

代码有效。

我们如何让 typescript 来理解这一点？

如果这是一个“糟糕的模式”，请具体说明/建议替代方案。

【问题讨论】：

标签： typescript vue.js vuetify.js

【解决方案1】：

如果您正在寻找简单的 TypeScript 支持，我强烈建议您使用 vue-class-components。

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class App extends Vue {
  bar: boolean = false;

  mounted () {
    this.bar = "test" // won't work because this.bar is a boolean
  }
}
</script>

【讨论】：

我认为类组件已被弃用：scotch.io/bar-talk/…
据我了解，它是为即将发布的 Vue3 Release 准备的。在 Vue2 中，它现在可以完美运行。