Pinia InternalError：在 Quasar 中使用 q-list 時出現太多遞歸錯誤

Question

<p>在我的 Quasar 組件中使用 Pinia Store 時，我遇到了這個錯誤 <code>InternalError: Too much recursion</code>，我已經做了我所知道的一切但沒有解決。 </p><p> 我可以在這裡得到建議嗎？ </p> <p>這是我的 <code>IndexPage.vue</code>，我在其中呼叫 QList 元件：</p> <pre class="brush:php;toolbar:false;"><template> <q-page> <div class="q-pa-md" style="max-width: 350px"> <QList /> </div> </q-page> </template> <script> import QList from 'src/components/QList.vue'; export default { components: { QList } } </script></pre> <p>這是我的 <code>QList.vue</code> 組件：</p> <pre class="brush:php;toolbar:false;"><template> <div v-if="loading">Carregando...</div> <q-item v-for=“測試資料中的項目” :key="item.id";可點擊的V型波紋> {{ item.title }}; </q-item> </q-列表> </範本> <腳本> 從 '../stores/teste' 導入 { testeStore } 從“vue”導入{defineComponent，計算，onMounted}； 導出預設定義組件（{ 設定 () { const store = testeStore(); onMounted(() => { store.loadData(); }); const testData = 計算(() => store.getData()); const 載入 = 計算(() => store.$state.loading); 返回 { 測試數據， 載入中 } } }) </劇本></pre> <p>還有我的 <code>testeStore.js</code>店：</p> <pre class="brush:php;toolbar:false;">從 'pinia' 匯入 { DefineStore } 從 '../assets/data/testes.json' 導入 testeData 導出 const testeStore = DefineStore({ id: '測試', 狀態：() => ({ 數據： []， 加載：假， }), 吸氣劑：{ 取得資料：狀態=>狀態.數據, }, 行動：{ 載入資料（）{ 嘗試 { this.loading = true this.data = testeData; } 捕獲（錯誤）{ console.log(`取得睪丸時發生錯誤：${{ error }}`) } 最後 { this.loading = false } } } })</pre> <p>每個組件看起來都很正常，我真的不知道我的問題出在哪裡。這是來自控制台的一段vue warn：</p>

[Vue warn]：執行調度程式刷新期間出現未處理的錯誤。這可能是 Vue 內部錯誤。請在 https://new-issue.vuejs.org/?repo=vuejs/core 提出問題
  在
  在
  在
  在
  在
  在
  在
  在
  在
  在
  在
  在
  在
  在
  在
  在
  在
  在
  在
  在
  在
P粉262073176413 天前383 

Answer 1

剛剛檢查了 stackblitz，看起來您自己的 QList 元件和 Quasar 的內建「q-list」元件之間存在命名衝突。 Vue 對待元件名稱不區分大小寫，這就是為什麼它將「q-list」和「QList」解釋為同一個元件。

要解決此問題，您可以嘗試將自己的 QList 元件重新命名為與 Quasar 元件不衝突的其他名稱，例如“MyQList”，或使用別名匯入 Quasar“q-list”元件。

從 'quasar' 導入 { Qlist as QuasarList }