案例和问题
我正在使用Vue.js进行一个私人项目,并且遇到了以下错误,当我尝试使用PrimeVue的FileUpload组件时发生:
[Vue warn]: 在渲染期间访问了属性“$primevue”,但该属性在实例上未定义。
尝试在我的组件中使用FileUpload:
<template>
<FileUpload name="demo[]" url="" @upload="onUpload" :multiple="true" :maxFileSize="1000000">
<template #empty>
<p>拖放文件到此处上传。</p>
</template>
</FileUpload>
</template>
只有当我尝试使用FileUpload时才会出现错误,如果我删除它,组件就可以正常工作。 FileUpload和PrimeVue都已按照应该的方式在main.js中导入:
import {createApp} from 'vue'
import router from "./router";
import store from "./store";
import PrimeVue from "primevue/config";
import PrimeIcons from "primevue/config";
import App from "./App";
const app = createApp(App);
app.use(
router,
PrimeVue,
PrimeIcons,
store
)
import 'primevue/resources/primevue.min.css'
import 'primeflex/primeflex.css'
import 'primeicons/primeicons.css'
import 'primevue/resources/themes/bootstrap4-dark-purple/theme.css'
import Card from "primevue/card";
import Menubar from "primevue/menubar";
import FileUpload from "primevue/fileupload";
app.component('Card', Card)
app.component('Menubar', Menubar)
app.component('FileUpload', FileUpload)
app.mount('#app')
我尝试过的方法
我搜索了这个问题,但唯一与此错误完全匹配的是GitHub上关于Calendar组件的一个旧的已关闭的问题:Issue #808。这个问题是由于新的PrimeVue API的重大更改引起的。这不应该是我的情况,因为它是在V3.1中引入的,而我正在使用V3.7。
如果版本是问题,我测试了不同版本的PrimeVue,如3.1、3.2、3.3,但错误仍然存在。因此,实际的依赖关系仍然是最新的:
"primevue": "^3.7.0"
也许在SO或Google上已经存在解决方案,但是要么我的英语太差以至于无法理解,要么我对Vue.js还不够熟悉以理解这个问题。
提前感谢!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
您对
app.use()的使用方式是错误的:app.use( router, PrimeVue, PrimeIcons, store )app.use()只接受两个参数:另外,
PrimeIcons不是一个插件,所以不应该传递给app.use()。解决方案
将每个插件单独传递给
app.use():