Vue：无效的道具：类型

Posted 2023-02-23

【中文标题】Vue：无效的道具：类型

【英文标题】：Vue: Invalid prop: type

【发布时间】：2021-03-18 05:51:43

【问题描述】：

当我从后端服务获取数据时，我在 Vue 中收到多个警告：

[Vue warn]: Invalid prop: type check failed for prop "item". Expected Item, got Object 

我还有以下代码：

物品卡片

<template>
...
</template>
<script lang="ts">
import  Options, Vue  from "vue-class-component";
import  Prop  from 'vue-property-decorator'
import  Item  from "./Item";

export default class ItemCard extends Vue  
  @Prop(Item) item!: Item;

</script>

菜单

<template>
        <div v-for="category in categories" :key="category.id" class="category-wrapper">
          <h2 class="title dm-text-header"> category.title </h2>
          <h4 class="subheading "> category.description </h4>

          <ItemCard
            v-for="item in category.items" 
            :key="item.id"
            v-bind:item="item"
          >
          </ItemCard>
        </div>
</template>

<script lang="ts">
import  Restaurant  from "./Restaurant"; 

@Options(
  components: 
    ItemCard
  
)
export default class Menu extends Vue 
  ...
  restaurant: Restaurant | null = null;
  categories: Category[] = [];
  ...

  getRestaurant(): void 
    axios.get<Restaurant>(this.restaurantUrl)
    .then(res => 
      this.restaurant = res.data;
    );
  

</script>

// Restaurant
import  Menu  from './Menu';
export class Restaurant 
    menu!: Menu;


// Menu 
import  Category  from './Category';
export class Menu 
    categories!: Category[];


// Category
import  Item  from './Item';
export class Category 
    items!: Item[];


// Item
export class Item
   ...

axios 总是以object 类型返回结果(Restaurant)，而不是我希望它具有的Resturant 类型。我可以通过Restaurant 访问类别/项目，但这些也已经属于object 类型，而不是预期的类型(Category/Item)。

只要显示所有内容，代码就可以正常工作，但是显示了很多警告，所以我认为我做错了什么。为了解决这些警告，我需要更改哪些地方和哪些内容？

【参考方案1】：

使用Object as PropType<Item>:

import  PropType  from 'vue';

export default class ItemCard extends Vue 
  @Prop(Object as PropType<Item>) item!: Item;

【讨论】：

答案中的链接指向 Vue 中 TypeScript 支持的文档。它包括一个Recommended configuration 部分，这应该是您所需要的。