Vue-TypeScript 應用程序類型錯誤：無法讀取未定義的屬性（讀取“配置”）

Question

我是 Vue 3 和 TypeScript 的新手，並且正在使用 PrimeVue。 我正在嘗試通過創建一個簡單的待辦事項應用程序來學習。 我遇到了一個錯誤，上面寫着

Uncaught TypeError: Cannot read properties of undefined (reading 'config')
at Proxy.containerClass (menu.esm.js:306:50)
at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
at get value [as value] (reactivity.esm-bundler.js:1144:39)
at Object.get [as containerClass] (runtime-core.esm-bundler.js:3427:30)
at menu.esm.js:346:33
at Proxy.renderFnWithContext (runtime-core.esm-bundler.js:853:21)
at Proxy.<anonymous> (runtime-core.esm-bundler.js:1947:78)
at renderComponentRoot (runtime-core.esm-bundler.js:896:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5580:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)

我不確定這意味着什么。 我搜索了配置代碼，但仍然不明白問題所在。 這是一個片段，如果它有幫助的話。

 <script setup lang="ts">
 import { ref } from 'vue';
 import Menubar from 'primevue/menubar'
 import Menu from 'primevue/menu';

    const items = ref([
        {  
            items: [{
                label: 'Search',
                icon: 'pi pi-search',
                uri: './LeftNavigation.vue'
            },
            {
                label: 'View Completed',
                icon: 'pi pi-check-square', 
                uri: ''
            },
            {
                label: 'Delete',
                icon: 'pi pi-trash',
                uri: ''
            },
            {
                label: 'View Archived',
                icon: 'pi pi-cloud-upload',
                uri: ''
            },
            {
                label: 'View All',
                icon: 'pi pi-list',
                uri: ''
            },                                                                
        ]},
    ]);
   </script>

   <template>
     <div style="background-color:brown;width:50px">
       <Menu :model="items" />
     </div>
   </template>

   <style lang="scss" scoped>

   </style>

Answer 1

我認為你必須像這樣導入它：

 <script setup lang="ts">
 import Menu from 'primevue/menu/sfc';

https://www.primefaces.org/primevue/setup

Answer 2

在安裝 PrimeVue 插件之前，您已經安裝了應用程序：

// main.ts
⋮
const app = createApp(App)
app.mount('#app') 👈
app.use(PrimeVue)
app.use(DialogService)

這會導致您在 PrimeVue 組件嘗試查找其配置時遇到的錯誤，該配置應該由插件設置。

解決方案

掛載組件作為最后一個初始化步驟：

// main.ts
⋮
const app = createApp(App)
app.use(PrimeVue)
app.use(DialogService)
app.mount('#app') 👈