本文介绍了VueJS 项目中的范围错误 &打字稿的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在使用 TypeScript 的 VueJS 项目中出现错误,其中我的 vue 文件被拆分为 HTML、CSS、TS 和 vue.
我有这个错误:属性 '$router' 不存在于类型 '{validate(): void;}'
这是我的文件的分割方式:
登录.vue:
<script src=./Login.ts"></script><style src=./Login.css"></style>
登录.html:
<v-col sm=4"对齐=中心"justify=中心"><v-form ref=form";v-model=有效"延迟验证><v-text-field v-model="login";:label="$t('用户名')";必填></v-text-field><v-text-field v-model="密码";:label="$t('密码')";类型=密码"必填></v-text-field><v-btn color=primary class=mr-4";@click="验证">{{ $t('登录') }}</v-btn></v-form></v-col>
登录.ts:
出口默认{name: '登录',数据() {返回 {字段:{登录: '',密码: ''}}},方法: {证实() {if (admin" === this.login &&admin" === this.password) {this.$router.push('index')}}}}
因此出现此错误,我无法构建我的应用.
有人知道吗?
谢谢!
安东尼
解决方案
要获得类型推断,您应该使用 Vue.extend({})
创建组件:
登录.ts
从vue"导入Vue导出默认 Vue.extend({name: '登录',数据() {返回 {字段:{登录: '',密码: ''}}},方法: {证实() {if ("admin" === this.fields.login && "admin" === this.fields.password) {this.$router.push('index')}}}})
I have a an error in a VueJS project with TypeScript where my vue files are splitted in HTML, CSS, TS and vue.
I have this error : Property '$router' does not exist on type '{ validate(): void; }'
Here is how my files are splitted :
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')
}
}
}
}
So with this error, I cannot build my app.
Do someone have any idea ?
Thank you !
Antoine
解决方案
To get types inference you should create the component using 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 项目中的范围错误 &打字稿的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!