VueJS3与Axios和TypeScript -找不到变量

Question

我不能使用axios + vuejs3 + ts访问方法中的vuejs3变量。

模板代码(没有必要)：

<template>
  <div>
    <form>
      <label for="email"> E-mail </label>
      <input
        type="email"
        placeholder=""
        name="email"
        id="email"
        v-model="email"
      />
      <br /><br />
      <label for="password"> Senha </label>
      <input
        type="password"
        placeholder=""
        v-model="password"
        name="password"
        id="password"
      />
      <br /><br />
      <button @click="doLogin" type="button">Enviar</button>
    </form>
  </div>
</template>

重要我的vueJS代码：

<script lang="ts">
import { axios } from "../services/config";

interface Login {
  email: string;
  password: string;
}

export default {
  data(): { email: string; password: string; data: string } {
    return {
      email: "",
      password: "",
      data: "",
    };
  },
  methods: {
    async doLogin(): Promise<void> {
      let userData: Login = {
        email: "thiago.valente@valente.com",
        password: "myPassword",
      };
      try {
        const response: string = await axios.post("/login", userData);
        this.data = response;
      } catch (error) {
        this.data = "Error: " + error;
      }
    },
  },
};
</script>

当我试图构建(保存)时，我会收到当前的错误：

ERROR in src/views/Login.vue:52:14
TS2339: Property 'data' does not exist on type '{ doLogin(): Promise<void>; }'.
    50 |         this.data = response;
    51 |       } catch (error) {
  > 52 |         this.data = "Error: " + error;
       |              ^^^^
    53 |       }
    54 |     },
    55 |   },

如果我停用打字稿那就很好了。有时这是工作，但如果我再次尝试保存，我就会出错。

Answer 1

在组件定义对象上使用defineComponent获得类型推断：

import { defineComponent } from 'vue'

export default defineComponent({
  methods: {
    doLogin() {
      console.log(this.data)
    }
  }
})