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

Posted 2023-02-22

【中文标题】Vue 3 和 Typescript - 无法访问方法中的数据属性

【英文标题】：Vue 3 and Typescript - Cannot access data property in a method

【发布时间】：2021-03-12 07:06:00

【问题描述】：

我正在尝试以我正在编写的方法访问我的数据，但它似乎不起作用。我收到一个 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 lang="ts">
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>

【参考方案1】：

要获得类型推断，您应该使用从 vue 导入的 defineComponent 创建组件实例：

<script lang="ts">
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(
  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>

【讨论】：

请注意，这是 Vuejs3 变体（vuejs3 标记在这个问题中）。对于 Vuejs2 上的任何人，您都需要导入 Vue 并使用 export default Vue.extend( 而不是 defineComponent 行。