案例與問題
我正在使用Vue.js
進行一個私人項目,並且遇到了以下錯誤,當我嘗試使用PrimeVue
的FileUpload code>組件時發生:
[Vue warn]: 在渲染期間存取了屬性“$primevue”,但該屬性在實例上未定義。
嘗試在我的元件中使用FileUpload
:
拖曳文件到此處上傳。
只有當我嘗試使用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
還不夠熟悉以理解這個問題。
提前感謝!
您對
app.use()
的使用方式是錯誤的:app.use()
只接受兩個參數:另外,
PrimeIcons
不是一個插件,所以不應該傳遞給app.use()
。解決方案
將每個外掛程式單獨傳遞給
app.use()
: