我有一个只有一个页面的应用程序,可以直接从 URL 或 NuxtLink 中的“href”调用此页面 => OK,但我从 NuxtLink 调用它“to”或通过带有 router.push 的路由器我的页面崩溃,因为子组件是未加载
此处加载页面
<template>
<div>
<h1 align="center">Commandes à Livrer</h1>
<v-row class="mt-5">
<v-row v-if="pending" >
clear
</v-row>
<v-alert type="error" v-if="error">
<div v-if="error.statusCode==500">
There is connection error with server please contact administrator
</div>
<div v-if="error.statusCode!=500">
{{error}}
</div>
</v-alert>
</v-row>
<v-row v-if="orders">
<v-col lg="3" sm="6" v-for="order in orders.orders" v-bind:key="order.id" class="mt-5">
<v-card >
<v-card-title align="center" class="big-font" @click.stop="displayModal(order.id)">
<strong>{{ order.id }}</strong>
</v-card-title>
<v-divider class="mx-6"></v-divider>
<v-card-text>
{{ order.date_upd }}
<OrderPartialAddress :id_address_delivery="order.id_address_delivery"/>
</v-card-text>
<v-card-actions>
...
</v-card-actions>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script lang="ts" setup>
import {useIntervalFn} from "@vueuse/core";
const display = ref(false);
let content = "";
const {REST_API_URL, TOKEN, TIME_REFRESH_ORDER} = useRuntimeConfig();
const token = useState('token');
console.log('use token' + token)
const {data: orders, error, pending, refresh} = useLazyFetch(REST_API_URL + '/orders/delivery', {
headers: {
'Authorization': 'Bearer ' + TOKEN,
'Content-Type': 'Application/json'
}
});
useIntervalFn(() => {
console.debug(`refreshing order ${new Date().toISOString()}`)
refresh() // will call the 'todos' endpoint, just above
}, TIME_REFRESH_ORDER)
</script>
<style scoped>
.big-font {
font-size: 20px;
}
.my-card {
margin: 5px;
}
</style>
我的地址组件在components/order/partial/address.vue
<template>
<div>
<td>
<p>
<strong>Nom: </strong>{{ address.address.lastname }} {{ address.address.firstname }}<br/>
<strong>Addresse: </strong>{{ address.address.address1 }}, {{ address.address.address2 }}<br/>
<strong>Ville: </strong>{{ address.address.postcode }},{{ address.address.city }}<br/>
<strong>Telephone: </strong>
<NuxtLink href="tel:{address.address.postcode}" > {{address.address.phone_mobile}}</NuxtLink>
</p>
</td>
</div>
</template>
<script lang="ts" setup>
const {REST_API_URL, TOKEN} = useRuntimeConfig();
const props = defineProps({
id_address_delivery: {
type: String,
required: true,
},
})
const {data: address, error, pending} = useLazyFetch(REST_API_URL + '/addresses/' + props.id_address_delivery, {
headers: {
'Authorization': 'Bearer ' + TOKEN,
'Content-Type': 'Application/json'
}
});
</script>
所以在 menu.vue 中
如果我使用 NuxtLink“href”,所有工作都会出现水合警告,如果我使用“to”或 router.push 页面崩溃,因为子组件没有对象
其他错误:
content.js:46 Warning: a promise was rejected with a non-error: [object Undefined] at H (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1331737) at t._warn (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1325969) at T._rejectCallback (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1361579) at chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1361832 at chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1229723 at l (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1389216) at t._doInvokeOnCancel (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1321392) at c (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1316364) at s (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1316250) at a._drainQueues (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1317376) at drainQueues (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1316184)From previous event: at T.B [as _captureStackTrace] (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1331376) at T._resolveFromExecutor (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1361712) at new T (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1354789) at Object.start (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1229330) at r.<anonymous> (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1230576) at s.emit (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:1430214) at r.value (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:1:123539) at chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:1:123205 at u (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:2072167) at Generator._invoke (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:2071955) at Generator.next (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:2072596) at a (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:1:33954) at s (chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:1:34157) at chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:1:34216 at new Promise (<anonymous>) at chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:1:34097 at chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:1:123296 at new Promise (<anonymous>) at chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:1:122758 at chrome-extension://mfidniedemcgceagapgdekdbmanojomk/content.js:46:2115160
s @ content.js:46
V @ content.js:46
H @ content.js:46
t._warn @ content.js:46
T._rejectCallback @ content.js:46
(anonymous) @ content.js:46
(anonymous) @ content.js:46
l @ content.js:46
t._doInvokeOnCancel @ content.js:46
c @ content.js:46
s @ content.js:46
a._drainQueues @ content.js:46
drainQueues @ content.js:46
Promise.then (async)
i @ content.js:46
a._queueTick @ content.js:46
a.invoke @ content.js:46
t._invokeOnCancel @ content.js:46
t._cancelBy @ content.js:46
t.break.t.cancel @ content.js:46
start @ content.js:46
(anonymous) @ content.js:46
s.emit @ content.js:46
value @ content.js:1
(anonymous) @ content.js:1
u @ content.js:46
(anonymous) @ content.js:46
(anonymous) @ content.js:46
a @ content.js:1
s @ content.js:1
(anonymous) @ content.js:1
(anonymous) @ content.js:1
(anonymous) @ content.js:1
(anonymous) @ content.js:1
(anonymous) @ content.js:46
runtime-core.esm-bundler.js:40 [Vue warn]: Unhandled error during execution of render function
at <Address id_address_delivery="2573" >
at <VCardText>
at <VCard>
at <VCol lg="3" sm="6" key=1322 ... >
at <VRow key=0 >
at <List onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > >
at <RouteProvider key="/delivery/list" routeProps= {Component: {…}, route: {…}} pageKey="/delivery/list" ... >
at <FragmentWrapper >
at <RouterView name=undefined route=undefined >
at <NuxtPage>
at <VContainer fluid="" >
at <VMain>
at <VApp>
at <Default.vue >
at <LayoutLoader key="default" name="default" hasTransition=false >
at <FragmentWrapper >
at <NuxtLayout>
at <Html lang="en" >
at <App key=2 >
at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:40
logError @ runtime-core.esm-bundler.js:230
handleError @ runtime-core.esm-bundler.js:222
renderComponentRoot @ runtime-core.esm-bundler.js:943
componentUpdateFn @ runtime-core.esm-bundler.js:5649
run @ reactivity.esm-bundler.js:190
instance.update @ runtime-core.esm-bundler.js:5763
setupRenderEffect @ runtime-core.esm-bundler.js:5777
mountComponent @ runtime-core.esm-bundler.js:5559
processComponent @ runtime-core.esm-bundler.js:5517
patch @ runtime-core.esm-bundler.js:5119
mountChildren @ runtime-core.esm-bundler.js:5303
mountElement @ runtime-core.esm-bundler.js:5213
processElement @ runtime-core.esm-bundler.js:5196
patch @ runtime-core.esm-bundler.js:5116
componentUpdateFn @ runtime-core.esm-bundler.js:5656
run @ reactivity.esm-bundler.js:190
instance.update @ runtime-core.esm-bundler.js:5763
setupRenderEffect @ runtime-core.esm-bundler.js:5777
mountComponent @ runtime-core.esm-bundler.js:5559
processComponent @ runtime-core.esm-bundler.js:5517
patch @ runtime-core.esm-bundler.js:5119
mountChildren @ runtime-core.esm-bundler.js:5303
processFragment @ runtime-core.esm-bundler.js:5476
patch @ runtime-core.esm-bundler.js:5112
mountChildren @ runtime-core.esm-bundler.js:5303
mountElement @ runtime-core.esm-bundler.js:5213
processElement @ runtime-core.esm-bundler.js:5196
patch @ runtime-core.esm-bundler.js:5116
componentUpdateFn @ runtime-core.esm-bundler.js:5656
run @ reactivity.esm-bundler.js:190
instance.update @ runtime-core.esm-bundler.js:5763
setupRenderEffect @ runtime-core.esm-bundler.js:5777
mountComponent @ runtime-core.esm-bundler.js:5559
processComponent @ runtime-core.esm-bundler.js:5517
patch @ runtime-core.esm-bundler.js:5119
mountChildren @ runtime-core.esm-bundler.js:5303
mountElement @ runtime-core.esm-bundler.js:5213
processElement @ runtime-core.esm-bundler.js:5196
patch @ runtime-core.esm-bundler.js:5116
componentUpdateFn @ runtime-core.esm-bundler.js:5656
run @ reactivity.esm-bundler.js:190
instance.update @ runtime-core.esm-bundler.js:5763
setupRenderEffect @ runtime-core.esm-bundler.js:5777
mountComponent @ runtime-core.esm-bundler.js:5559
processComponent @ runtime-core.esm-bundler.js:5517
patch @ runtime-core.esm-bundler.js:5119
mountChildren @ runtime-core.esm-bundler.js:5303
processFragment @ runtime-core.esm-bundler.js:5476
patch @ runtime-core.esm-bundler.js:5112
mountChildren @ runtime-core.esm-bundler.js:5303
mountElement @ runtime-core.esm-bundler.js:5213
processElement @ runtime-core.esm-bundler.js:5196
patch @ runtime-core.esm-bundler.js:5116
componentUpdateFn @ runtime-core.esm-bundler.js:5656
run @ reactivity.esm-bundler.js:190
instance.update @ runtime-core.esm-bundler.js:5763
setupRenderEffect @ runtime-core.esm-bundler.js:5777
mountComponent @ runtime-core.esm-bundler.js:5559
processComponent @ runtime-core.esm-bundler.js:5517
patch @ runtime-core.esm-bundler.js:5119
patchBlockChildren @ runtime-core.esm-bundler.js:5424
patchElement @ runtime-core.esm-bundler.js:5332
processElement @ runtime-core.esm-bundler.js:5199
patch @ runtime-core.esm-bundler.js:5116
componentUpdateFn @ runtime-core.esm-bundler.js:5729
run @ reactivity.esm-bundler.js:190
instance.update @ runtime-core.esm-bundler.js:5763
callWithErrorHandling @ runtime-core.esm-bundler.js:173
flushJobs @ runtime-core.esm-bundler.js:406
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:298
queueJob @ runtime-core.esm-bundler.js:292
(anonymous) @ runtime-core.esm-bundler.js:5761
triggerEffect @ reactivity.esm-bundler.js:400
triggerEffects @ reactivity.esm-bundler.js:390
triggerRefValue @ reactivity.esm-bundler.js:1021
set value @ reactivity.esm-bundler.js:1066
(anonymous) @ asyncData.mjs?v=52755a8c:61
Promise.then (async)
asyncData.refresh.asyncData.execute @ asyncData.mjs?v=52755a8c:51
initialFetch @ asyncData.mjs?v=52755a8c:83
(anonymous) @ asyncData.mjs?v=52755a8c:101
(anonymous) @ asyncData.mjs?v=52755a8c:100
(anonymous) @ runtime-core.esm-bundler.js:2757
callWithErrorHandling @ runtime-core.esm-bundler.js:173
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2731
invokeArrayFns @ shared.esm-bundler.js:553
componentUpdateFn @ runtime-core.esm-bundler.js:5607
run @ reactivity.esm-bundler.js:190
instance.update @ runtime-core.esm-bundler.js:5763
setupRenderEffect @ runtime-core.esm-bundler.js:5777
mountComponent @ runtime-core.esm-bundler.js:5559
processComponent @ runtime-core.esm-bundler.js:5517
patch @ runtime-core.esm-bundler.js:5119
componentUpdateFn @ runtime-core.esm-bundler.js:5656
run @ reactivity.esm-bundler.js:190
instance.update @ runtime-core.esm-bundler.js:5763
setupRenderEffect @ runtime-core.esm-bundler.js:5777
mountComponent @ runtime-core.esm-bundler.js:5559
processComponent @ runtime-core.esm-bundler.js:5517
patch @ runtime-core.esm-bundler.js:5119
patchSuspense @ runtime-core.esm-bundler.js:1323
process @ runtime-core.esm-bundler.js:1204
patch @ runtime-core.esm-bundler.js:5125
patchKeyedChildren @ runtime-core.esm-bundler.js:5883
patchChildren @ runtime-core.esm-bundler.js:5826
processFragment @ runtime-core.esm-bundler.js:5506
patch @ runtime-core.esm-bundler.js:5112
componentUpdateFn @ runtime-core.esm-bundler.js:5729
run @ reactivity.esm-bundler.js:190
instance.update @ runtime-core.esm-bundler.js:5763
updateComponent @ runtime-core.esm-bundler.js:5588
processComponent @ runtime-core.esm-bundler.js:5521
patch @ runtime-core.esm-bundler.js:5119
componentUpdateFn @ runtime-core.esm-bundler.js:5729
run @ reactivity.esm-bundler.js:190
instance.update @ runtime-core.esm-bundler.js:5763
callWithErrorHandling @ runtime-core.esm-bundler.js:173
flushJobs @ runtime-core.esm-bundler.js:406
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:298
queueJob @ runtime-core.esm-bundler.js:292
(anonymous) @ runtime-core.esm-bundler.js:5761
triggerEffect @ reactivity.esm-bundler.js:400
triggerEffects @ reactivity.esm-bundler.js:390
triggerRefValue @ reactivity.esm-bundler.js:1021
(anonymous) @ reactivity.esm-bundler.js:1158
triggerEffect @ reactivity.esm-bundler.js:400
triggerEffects @ reactivity.esm-bundler.js:385
triggerRefValue @ reactivity.esm-bundler.js:1021
(anonymous) @ reactivity.esm-bundler.js:1158
triggerEffect @ reactivity.esm-bundler.js:400
triggerEffects @ reactivity.esm-bundler.js:385
triggerRefValue @ reactivity.esm-bundler.js:1021
set value @ reactivity.esm-bundler.js:1066
finalizeNavigation @ vue-router.mjs:3334
(anonymous) @ vue-router.mjs:3207
Promise.then (async)
pushWithRedirect @ vue-router.mjs:3174
push @ vue-router.mjs:3099
watch.deep @ login.vue:89
callWithErrorHandling @ runtime-core.esm-bundler.js:173
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182
job @ runtime-core.esm-bundler.js:1812
callWithErrorHandling @ runtime-core.esm-bundler.js:173
flushJobs @ runtime-core.esm-bundler.js:406
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:298
queueJob @ runtime-core.esm-bundler.js:292
scheduler @ runtime-core.esm-bundler.js:1845
triggerEffect @ reactivity.esm-bundler.js:400
triggerEffects @ reactivity.esm-bundler.js:390
triggerRefValue @ reactivity.esm-bundler.js:1021
set value @ reactivity.esm-bundler.js:1066
(anonymous) @ asyncData.mjs?v=52755a8c:61
Promise.then (async)
asyncData.refresh.asyncData.execute @ asyncData.mjs?v=52755a8c:51
initialFetch @ asyncData.mjs?v=52755a8c:83
useAsyncData @ asyncData.mjs?v=52755a8c:113
useFetch @ fetch.mjs?v=52755a8c:50
onSubmit @ login.vue:73
(anonymous) @ vee-validate.esm.js:2025
Promise.then (async)
submissionHandler @ vee-validate.esm.js:2021
callWithErrorHandling @ runtime-core.esm-bundler.js:173
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182
emit @ runtime-core.esm-bundler.js:730
(anonymous) @ runtime-core.esm-bundler.js:7465
onSubmit @ VForm.tsx:41
callWithErrorHandling @ runtime-core.esm-bundler.js:173
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182
invoker @ runtime-dom.esm-bundler.js:345
runtime-core.esm-bundler.js:40 [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 <Address id_address_delivery="2573" >
at <VCardText>
at <VCard>
at <VCol lg="3" sm="6" key=1322 ... >
at <VRow key=0 >
at <List onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > >
at <RouteProvider key="/delivery/list" routeProps= {Component: {…}, route: {…}} pageKey="/delivery/list" ... >
at <FragmentWrapper >
at <RouterView name=undefined route=undefined >
at <NuxtPage>
at <VContainer fluid="" >
at <VMain>
at <VApp>
at <Default.vue >
at <LayoutLoader key="default" name="default" hasTransition=false >
at <FragmentWrapper >
at <NuxtLayout>
at <Html lang="en" >
at <App key=2 >
at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:40
logError @ runtime-core.esm-bundler.js:230
handleError @ runtime-core.esm-bundler.js:222
callWithErrorHandling @ runtime-core.esm-bundler.js:176
flushJobs @ runtime-core.esm-bundler.js:406
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:298
queueJob @ runtime-core.esm-bundler.js:292
(anonymous) @ runtime-core.esm-bundler.js:5761
triggerEffect @ reactivity.esm-bundler.js:400
triggerEffects @ reactivity.esm-bundler.js:390
triggerRefValue @ reactivity.esm-bundler.js:1021
set value @ reactivity.esm-bundler.js:1066
(anonymous) @ asyncData.mjs?v=52755a8c:61
Promise.then (async)
asyncData.refresh.asyncData.execute @ asyncData.mjs?v=52755a8c:51
initialFetch @ asyncData.mjs?v=52755a8c:83
(anonymous) @ asyncData.mjs?v=52755a8c:101
(anonymous) @ asyncData.mjs?v=52755a8c:100
(anonymous) @ runtime-core.esm-bundler.js:2757
callWithErrorHandling @ runtime-core.esm-bundler.js:173
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2731
invokeArrayFns @ shared.esm-bundler.js:553
componentUpdateFn @ runtime-core.esm-bundler.js:5607
run @ reactivity.esm-bundler.js:190
instance.update @ runtime-core.esm-bundler.js:5763
setupRenderEffect @ runtime-core.esm-bundler.js:5777
mountComponent @ runtime-core.esm-bundler.js:5559
processComponent @ runtime-core.esm-bundler.js:5517
patch @ runtime-core.esm-bundler.js:5119
componentUpdateFn @ runtime-core.esm-bundler.js:5656
run @ reactivity.esm-bundler.js:190
instance.update @ runtime-core.esm-bundler.js:5763
setupRenderEffect @ runtime-core.esm-bundler.js:5777
mountComponent @ runtime-core.esm-bundler.js:5559
processComponent @ runtime-core.esm-bundler.js:5517
patch @ runtime-core.esm-bundler.js:5119
patchSuspense @ runtime-core.esm-bundler.js:1323
process @ runtime-core.esm-bundler.js:1204
patch @ runtime-core.esm-bundler.js:5125
patchKeyedChildren @ runtime-core.esm-bundler.js:5883
patchChildren @ runtime-core.esm-bundler.js:5826
processFragment @ runtime-core.esm-bundler.js:5506
patch @ runtime-core.esm-bundler.js:5112
componentUpdateFn @ runtime-core.esm-bundler.js:5729
run @ reactivity.esm-bundler.js:190
instance.update @ runtime-core.esm-bundler.js:5763
updateComponent @ runtime-core.esm-bundler.js:5588
processComponent @ runtime-core.esm-bundler.js:5521
patch @ runtime-core.esm-bundler.js:5119
componentUpdateFn @ runtime-core.esm-bundler.js:5729
run @ reactivity.esm-bundler.js:190
instance.update @ runtime-core.esm-bundler.js:5763
callWithErrorHandling @ runtime-core.esm-bundler.js:173
flushJobs @ runtime-core.esm-bundler.js:406
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:298
queueJob @ runtime-core.esm-bundler.js:292
(anonymous) @ runtime-core.esm-bundler.js:5761
triggerEffect @ reactivity.esm-bundler.js:400
triggerEffects @ reactivity.esm-bundler.js:390
triggerRefValue @ reactivity.esm-bundler.js:1021
(anonymous) @ reactivity.esm-bundler.js:1158
triggerEffect @ reactivity.esm-bundler.js:400
triggerEffects @ reactivity.esm-bundler.js:385
triggerRefValue @ reactivity.esm-bundler.js:1021
(anonymous) @ reactivity.esm-bundler.js:1158
triggerEffect @ reactivity.esm-bundler.js:400
triggerEffects @ reactivity.esm-bundler.js:385
triggerRefValue @ reactivity.esm-bundler.js:1021
set value @ reactivity.esm-bundler.js:1066
finalizeNavigation @ vue-router.mjs:3334
(anonymous) @ vue-router.mjs:3207
Promise.then (async)
pushWithRedirect @ vue-router.mjs:3174
push @ vue-router.mjs:3099
watch.deep @ login.vue:89
callWithErrorHandling @ runtime-core.esm-bundler.js:173
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182
job @ runtime-core.esm-bundler.js:1812
callWithErrorHandling @ runtime-core.esm-bundler.js:173
flushJobs @ runtime-core.esm-bundler.js:406
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:298
queueJob @ runtime-core.esm-bundler.js:292
scheduler @ runtime-core.esm-bundler.js:1845
triggerEffect @ reactivity.esm-bundler.js:400
triggerEffects @ reactivity.esm-bundler.js:390
triggerRefValue @ reactivity.esm-bundler.js:1021
set value @ reactivity.esm-bundler.js:1066
(anonymous) @ asyncData.mjs?v=52755a8c:61
Promise.then (async)
asyncData.refresh.asyncData.execute @ asyncData.mjs?v=52755a8c:51
initialFetch @ asyncData.mjs?v=52755a8c:83
useAsyncData @ asyncData.mjs?v=52755a8c:113
useFetch @ fetch.mjs?v=52755a8c:50
onSubmit @ login.vue:73
(anonymous) @ vee-validate.esm.js:2025
Promise.then (async)
submissionHandler @ vee-validate.esm.js:2021
callWithErrorHandling @ runtime-core.esm-bundler.js:173
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182
emit @ runtime-core.esm-bundler.js:730
(anonymous) @ runtime-core.esm-bundler.js:7465
onSubmit @ VForm.tsx:41
callWithErrorHandling @ runtime-core.esm-bundler.js:173
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:182
invoker @ runtime-dom.esm-bundler.js:345
Address.vue:5 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'address')
at Proxy._sfc_render (Address.vue:5:5)
at renderComponentRoot (runtime-core.esm-bundler.js:914:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5649:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
at instance.update (runtime-core.esm-bundler.js:5763:56)
at setupRenderEffect (runtime-core.esm-bundler.js:5777:9)
at mountComponent (runtime-core.esm-bundler.js:5559:9)
at processComponent (runtime-core.esm-bundler.js:5517:17)
at patch (runtime-core.esm-bundler.js:5119:21)
at mountChildren (runtime-core.esm-bundler.js:5303:13)
我记得在 NuxtLink 或 vuetify 按钮中使用直接 URL 调用或 href 时,它会发出简单的水化警告。
任何想法?
O 在我这边,我只需要用“to”和路由器推送来做我必须检查子组件中是否存在数据,我不知道为什么我们在使用“href”时不必这样做
<template>
<div>
<p v-if="address">
<strong>Nom: </strong>{{ address.address.lastname }} {{ address.address.firstname }}<br/>
<strong>Addresse: </strong>{{ address.address.address1 }}, {{ address.address.address2 }}<br/>
<strong>Ville: </strong>{{ address.address.postcode }},{{ address.address.city }}<br/>
<strong>Telephone: </strong>
<NuxtLink href="tel:{address.address.postcode}" > {{address.address.phone_mobile}}</NuxtLink>
</p>
</div>
</template>