gpt4 book ai didi

typescript - VueJS 项目和 TypeScript 中的范围错误

转载 作者:行者123 更新时间:2023-12-02 02:24:34 25 4
gpt4 key购买 nike

我在使用 TypeScript 的 VueJS 项目中出现错误,其中我的 vue 文件拆分为 HTML、CSS、TS 和 vue。

我有这个错误:属性“$router”在类型“{ validate(): void; 上不存在” }'

我的文件是这样分割的:

登录.vue :

<template src="./Login.html"></template>
<script src="./Login.ts"></script>
<style src="./Login.css"></style>

登录.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>

登录.ts:

export default {
name: 'Login',
data() {
return {
fields: {
login: '',
password: ''
}
}
},
methods: {
validate() {
if ("admin" === this.login && "admin" === this.password) {
this.$router.push('index')
}
}
}
}

因此,由于这个错误,我无法构建我的应用。

有人知道吗?

谢谢!

安托万

最佳答案

要获得类型推断,您应该使用 Vue.extend({}) 创建组件:

登录.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')
}
}
}
})

关于typescript - VueJS 项目和 TypeScript 中的范围错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65882582/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com