Vue Utils 无效的道具

Posted 2023-02-23

【中文标题】Vue Utils 无效的道具

【英文标题】：Vue Utils invalid prop

【发布时间】：2021-04-26 18:46:55

【问题描述】：

Vue Util 抛出控制台日志错误：

控制台错误 [Vue 警告]：无效的道具：道具“图标”的类型检查失败。预期的对象、数组、字符串，未定义

在这种情况下，我有一个父组件“myComp”，在里面我有另一个全局组件，这里是 Font Awesome，它已经被导入。我得到的错误是道具图标未定义，在“myComp”中道具图标不存在，所以我假设 vue utils 读取“fa”组件并在“myComp”中查找道具图标。我所有的测试都通过了，我只是收到这个警告并想摆脱它。

我在一个名为 componentsbind.js 的额外文件中导入我的全局组件，该文件已经过测试并且可以工作。

import  library  from '@fortawesome/fontawesome-svg-core'
import  faUserSecret  from '@fortawesome/free-solid-svg-icons'
import  FontAwesomeIcon  from '@fortawesome/vue-fontawesome'
library.add(faUserSecret)

我的组件：这是我正在测试的可重用组件

<template>
  <button @click="handleClick">
    <template v-if="loading">
      <fa :icon="faChevronRight " class="fa-spin text-xl" />
    </template>
    <template v-else>
      <slot />
    </template>
  </button>
</template>

在我已经导入的组件中

<script>
import  faChevronRight  from '@fortawesome/free-solid-svg-icons'
...

我的测试

import  shallowMount, RouterLinkStub  from '@vue/test-utils'
import MyComp from '@/components/MyComp.vue'

let wrapper

beforeEach(() => 
  wrapper = shallowMount(MyComp, 
    slots: ,
    stubs: 
  )
)

afterEach(() => 
  wrapper.destroy()
)

describe('MyComp Test', () => 
 //here are my tests...
)

【问题讨论】：

那是因为我猜 faCircleNotch 没有在那个组件中定义

在组件内部定义

您正在导入 faChevronRight 但您使用的是 faCircleNotch

【参考方案1】：

所以我的问题是我没有导入 vue 使用组合 api。 而且因为我在设置函数上返回图标，所以它总是未定义。

所以在我导入我刚刚添加的所有全局组件的文件中：

import VueCompositionAPI from '@vue/composition-api'
import  FontAwesomeIcon  from '@fortawesome/vue-fontawesome'
Vue.use(VueCompositionAPI)