VueJS 项目和 TypeScript 中的范围错误
Posted
技术标签:
【中文标题】VueJS 项目和 TypeScript 中的范围错误【英文标题】:Error of scope in VueJS project & TypeScript 【发布时间】:2021-04-29 03:06:16 【问题描述】:我在一个带有 TypeScript 的 VueJS 项目中出现错误,我的 vue 文件被拆分为 html、CSS、TS 和 vue。
我有这个错误:属性 '$router' 在类型 ' validate(): void; 上不存在'
这是我的文件的拆分方式:
Login.vue:
<template src="./Login.html"></template>
<script src="./Login.ts"></script>
<style src="./Login.css"></style>
Login.html:
<div id="form" align="center" justify="center">
<v-col sm="4" align="center" justify="center">
<v-form ref="form" v-model="valid" lazy-validation>
<v-text-field v-model="login" :label="$t('Username')" required></v-text-field>
<v-text-field v-model="password" :label="$t('Password')" type="password" required></v-text-field>
<v-btn color=primary class="mr-4" @click="validate">
$t('Login')
</v-btn>
</v-form>
</v-col>
</div>
Login.ts:
export default
name: 'Login',
data()
return
fields:
login: '',
password: ''
,
methods:
validate()
if ("admin" === this.login && "admin" === this.password)
this.$router.push('index')
因此出现此错误,我无法构建我的应用程序。
有人知道吗?
谢谢!
安东尼
【问题讨论】:
【参考方案1】:要获得类型推断,您应该使用 Vue.extend()
创建组件:
Login.ts
import Vue from "vue"
export default Vue.extend(
name: 'Login',
data()
return
fields:
login: '',
password: ''
,
methods:
validate()
if ("admin" === this.fields.login && "admin" === this.fields.password)
this.$router.push('index')
)
【讨论】:
以上是关于VueJS 项目和 TypeScript 中的范围错误的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Vue 类组件访问 VueJS 3 和 Typescript 中的 HTML 引用?
如何将 Storybook 安装到 VueJS 2 TypeScript 项目?
使用 Typescript 在 VueJS2 项目中使用 Jest 进行测试