VueJS 项目中的范围错误 &打字稿 [英] Error of scope in VueJS project & TypeScript

问题描述

我在使用 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 项目中的范围错误 &打字稿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！