搜索

首页  >  问答  >  正文

渲染过程中访问了未定义的属性'$primevue'

<p><strong>案例和问题</strong></p> <p>我正在使用<code>Vue.js</code>进行一个私人项目,并且遇到了以下错误,当我尝试使用<code>PrimeVue</code>的<code>FileUpload</code>组件时发生:</p> <pre class="brush:php;toolbar:false;">[Vue warn]: 在渲染期间访问了属性“$primevue”,但该属性在实例上未定义。</pre> <p>尝试在我的组件中使用<code>FileUpload</code>:</p> <pre class="lang-html prettyprint-override"><code><template> <FileUpload name="demo[]" url="" @upload="onUpload" :multiple="true" :maxFileSize="1000000"> <template #empty> <p>拖放文件到此处上传。</p> </template> </FileUpload> </template> </code></pre> <p>只有当我尝试使用<code>FileUpload</code>时才会出现错误,如果我删除它,组件就可以正常工作。 <code>FileUpload</code>和<code>PrimeVue</code>都已按照应该的方式在<code>main.js</code>中导入:</p> <pre class="lang-js prettyprint-override"><code>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') </code></pre> <p><strong>我尝试过的方法</strong></p> <p>我搜索了这个问题,但唯一与此错误完全匹配的是GitHub上关于<code>Calendar</code>组件的一个旧的已关闭的问题:Issue #808。这个问题是由于新的<code>PrimeVue API</code>的重大更改引起的。这不应该是我的情况,因为它是在V3.1中引入的,而我正在使用V3.7。</p> <p>如果版本是问题,我测试了不同版本的<code>PrimeVue</code>,如3.1、3.2、3.3,但错误仍然存在。因此,实际的依赖关系仍然是最新的:</p> <pre class="brush:php;toolbar:false;">"primevue": "^3.7.0"</pre> <p>也许在SO或Google上已经存在解决方案,但是要么我的英语太差以至于无法理解,要么我对<code>Vue.js</code>还不够熟悉以理解这个问题。</p> <p>提前感谢!</p>
P粉476547076P粉476547076457 天前686

全部回复(1)我来回复

  • P粉611456309

    P粉6114563092023-08-26 14:49:54

    您对 app.use() 的使用方式是错误的:

    app.use(
        router,
        PrimeVue,
        PrimeIcons,
        store
    )
    

    app.use() 只接受两个参数:

    • 第一个参数:Vue 插件
    • 第二个参数:插件选项

    另外,PrimeIcons 不是一个插件,所以不应该传递给 app.use()

    解决方案

    将每个插件单独传递给 app.use()

    app.use(router)
       .use(PrimeVue)
       //.use(PrimeIcons)   // 不是一个插件
       .use(store)
    

    回复
    0
  • 取消回复