Pinia InternalError:在 Quasar 中使用 q-list 时出现太多递归错误
P粉262073176
P粉262073176 2023-09-01 20:26:11
[Vue.js讨论组]

在我的 Quasar 组件中使用 Pinia Store 时,我遇到了这个错误 InternalError: Too much recursion,我已经做了我所知道的一切但没有解决。

我可以在这里得到建议吗?

这是我的 IndexPage.vue,我在其中调用 QList 组件:

<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>

这是我的 QList.vue 组件:

<template>
    <div v-if="loading">Carregando...</div>
    <q-list v-else bordered separator>
        <q-item v-for="item in testData" :key="item.id" clickable v-ripple>
            <q-item-section>{{ item.title }}</q-item-section>
        </q-item>
    </q-list>
</template>

<script>
import { testeStore } from '../stores/teste'
import { defineComponent, computed, onMounted } from 'vue';

export default defineComponent({
    setup () {
        const store = testeStore();

        onMounted(() => {
            store.loadData();
        });

        const testData = computed(() => store.getData());
        const loading = computed(() => store.$state.loading);

        return {
            testData,
            loading
        }

    }
})
</script>

还有我的 testeStore.js 商店:

import { defineStore } from 'pinia'
import testeData from '../assets/data/testes.json'

export const testeStore = defineStore({
  id: 'teste',
  state: () => ({
    data: [],
    loading: false,
  }),
  getters: {
    getData: state => state.data,
  },
  actions: {
    loadData () {
      try {
        this.loading = true
        this.data = testeData;
      } catch (error) {
        console.log(`Error fetching testes: ${{ error }}`)
      } finally {
        this.loading = false
      }
    }

  }
})

每个组件看起来都很正常,我真的不知道我的问题出在哪里。 这是来自控制台的一段 vue warn:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" > 
  at <QList key=1 bordered="" separator="" >

P粉262073176
P粉262073176

全部回复(1)
P粉547170972

刚刚检查了 stackblitz,看起来您自己的 QList 组件和 Quasar 的内置“q-list”组件之间存在命名冲突。 Vue 对待组件名称不区分大小写,这就是为什么它将“q-list”和“QList”解释为同一个组件。

要解决此问题,您可以尝试将自己的 QList 组件重命名为与 Quasar 组件不冲突的其他名称,例如“MyQList”,或者使用别名导入 Quasar“q-list”组件。

从 'quasar' 导入 { Qlist as QuasarList }

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号