Pinia InternalError:在 Quasar 中使用 q-list 时出现太多递归错误
P粉262073176
P粉262073176 2023-09-01 20:26:11
0
1
416
<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粉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 }

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板