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 コンポーネントを呼び出します。 <pre class="brush:php;toolbar:false;"><テンプレート> <div class="q-pa-md" style="max-width: 350px"" <QList /> </div> </q-ページ> </テンプレート> <スクリプト> 'src/components/QList.vue' から QList をインポートします。 デフォルトのエクスポート { コンポーネント: { Qリスト } } </script></pre> <p>これは私の <code>QList.vue</code> コンポーネントです: </p> <pre class="brush:php;toolbar:false;"><テンプレート> <div v-if="loading">カレガンド...</div> <q-list v-else 境界区切り記号> <q-item v-for=「testData の項目」 :key="アイテムID"クリッカブルVリップル＞ <q-item-section>{{ item.title }}</q-item-section> </q-item> </q-list> </テンプレート> <スクリプト> import { testeStore } から '../stores/teste' import {defineComponent,computed,onMounted} from 'vue'; デフォルトのエクスポートdefineComponent({ 設定 （） { const ストア = testeStore(); onMounted(() => { ストア.loadData(); }); const testData = computed(() =>store.getData()); constloading = computed(() =>store.$state.loading); 戻る { テストデータ、 読み込み中 } } }) </script></pre> <p>また有我の <code>testeStore.js</code>商店：</p> <pre class="brush:php;toolbar:false;">import {defineStore} from 'pinia' 「../assets/data/testes.json」から testeData をインポートします エクスポート const testeStore =defineStore({ ID: 'テスト'、 状態: () => ({ データ： []、 ロード: false、 })、 ゲッター: { getData: 状態 =>状態.データ、 }、 行動： { データを読み込む （） { 試す { this.loading = true this.data = testeData; } キャッチ (エラー) { console.log(`テストの取得エラー: ${{ エラー }}`) } ついに { this.loading = false } } } })</pre> <p>各コンポーネントは非常に正常であるように見えますが、私たちの真の未知の問題がここにあります。これは制御台からの警告です:</p> <pre class="brush:php;toolbar:false;">[Vue warn]: スケジューラ フラッシュの実行中に処理されないエラーが発生しました。これはおそらく Vue 内部のバグです。 https://new-issue.vuejs.org/?repo=vuejs/core で問題を開いてください。 <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" > <QList key=1 bordered="" で区切り文字="" ></pre></p>

Answer 1

stackblitz を確認したところ、独自の QList コンポーネントと Quasar の組み込み "q-list" コンポーネントの間に名前の競合があるようです。 Vue はコンポーネント名の大文字と小文字を区別せずに処理するため、「q-list」と「QList」を同じコンポーネントとして解釈します。

この問題を解決するには、QList コンポーネントの名前を Quasar コンポーネントと競合しない別の名前 ("MyQ​​List" など) に変更するか、エイリアスを使用して Quasar "q-list" コンポーネントをインポートしてみてください。

From 'quasar' import { Qlist as QuasarList }