Question

Vue-TypeScript 应用程序 TypeError：无法读取未定义的属性（读取‘config’）

2022-07-22

5005

typescript vue.js vuejs3 primevue

我是 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)

我不确定这是什么意思。我在代码中搜索了 config ，但仍然不明白问题是什么。如果有帮助的话，这里有一个片段。

 <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

您已在安装 PrimeVue 插件之前安装了该应用程序：安装 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') 👈