渲染過程中存取了未定義的屬性'$primevue'
P粉476547076
P粉476547076 2023-08-25 16:17:16
0
1
494
<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"true> <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粉476547076
P粉476547076

全部回覆(1)
P粉611456309

您對 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)
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!