Vue 3 和 Typescript - 无法访问方法中的数据属性

Question

我试图用我正在编写的方法访问我的数据，但它似乎不起作用。我收到 TS2339 Typescript 错误，指出类型中不存在该属性。

TS2339: Property 'players' does not exist on type '{ onAddPlayers(): void; getPlayerPlaceholder(index: number): string; }'.   

    47 |   methods: {

    48 |     onAddPlayers() {

  > 49 |       this.games = prepareGames(this.players as PadelPlayer[]);

       |                                      ^^^^^^^

    50 |     },

    51 |     getPlayerPlaceholder(index: number) {

    52 |       const playerNumber = Number(index) + 1;

这是该组件的代码：

<script>

import { PadelGame } from "@/models/padelGame.interface";

import { getPadelPlayers, prepareGames } from "../services/americanoService";

import { PadelPlayer } from "@/models/padelPlayer.interface";

const padelGames: PadelGame[] = [];

export default {

  data() {

    return {

      players: getPadelPlayers(),

      games: padelGames,

    };

  },

  methods: {

    onAddPlayers() {

      this.games = prepareGames(this.players as PadelPlayer[]);

    },

    getPlayerPlaceholder(index: number) {

      const playerNumber = Number(index) + 1;

      return "Spelare " + playerNumber;

    },

  },

};

</script>

Answer 1

defineComponent要获得类型推断，您应该使用从 vue 导入来创建组件实例：<script>import { PadelGame } from "@/models/padelGame.interface";import { getPadelPlayers, prepareGames } from "../services/americanoService";import { PadelPlayer } from "@/models/padelPlayer.interface";import {defineComponent} from 'vue'const padelGames: PadelGame[] = [];export default defineComponent({&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; players: getPadelPlayers(),&nbsp; &nbsp; &nbsp; games: padelGames,&nbsp; &nbsp; };&nbsp; },&nbsp; methods: {&nbsp; &nbsp; onAddPlayers() {&nbsp; &nbsp; &nbsp; this.games = prepareGames(this.players as PadelPlayer[]);&nbsp; &nbsp; },&nbsp; &nbsp; getPlayerPlaceholder(index: number) {&nbsp; &nbsp; &nbsp; const playerNumber = Number(index) + 1;&nbsp; &nbsp; &nbsp; return "Spelare " + playerNumber;&nbsp; &nbsp; },&nbsp; },});</script>