我有帶有 apollo 可組合設定的 Vue3。我在一個看起來像這樣的模板中顯示了 for 回圈資料：
<template>
<div style="margin:0 auto;">
<ul >
<li>
<a >Tab1</a>
</li>
<li >
<i ></i>
</li>
<li>
<span >Tab2</span>
</li>
</ul>
<div >
<div>
<div >Client List</div>
</div>
<div >
<Button label="Add" icon="pi pi-user-plus" @click="openModal" />
</div>
</div>
<!-- for loop -->
<p v-for="c in result.clients" :key="c.id">
<b>{{ c.id}}</b>
</p>
</div>
</template>
顯示資料沒有問題，代碼有效，但我在瀏覽器中收到兩個錯誤：
[Vue warn]: Unhandled error during execution of render function
at <ClientsList onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>
at <App> runtime-core.esm-bundler.js:38
[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 <ClientsList onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>
at <App> runtime-core.esm-bundler.js:38
用 for 回圈注釋掉代碼的回圈部分會使錯誤消失。.vue 檔案中的 JavaScript 如下所示：
import { getClients } from "@/graphql/query.js"
import { useQuery } from '@vue/apollo-composable'
export default {
name: 'clients_list',
setup(){
const { result } = useQuery(getClients);
return { result }
},
查詢資料回傳變數結果如下：
{
"data": {
"clients": [
{
"id": "1",
"name": "Test1"
},
{
"id": "2",
"name": "Test2"
}
]
}
}
如何擺脫這兩個警告？
uj5u.com熱心網友回復：
不熟悉 VueApollo，但這可能表明在某些渲染周期中，一些 Ref 值被undefined用于渲染（result.value？）。
在快速瀏覽了 VueApollo 之后，我相信該useQuery方法是異步的（僅基于它還可以報告加載狀態的事實） - 它回傳一個Ref用于保存結果但資料將在以后不可用時請求完成。我無法重現完全相同的警告訊息，因為您的設定中似乎還有其他內容。但是如果result.value是異步填充的，最初會引起問題：
Vue SFC Playground 上的示例
嘗試防范undefined并查看是否有幫助：
<p v-for="c in result?.clients" :key="c.id">
<b> {{ c.id }} </b>
</p>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/495163.html
上一篇：回圈管道引數-有什么意義？