使用 router.push 或 to 而不是普通 URL 或 href 时 Nuxt3 出错

问题描述 投票:0回答:1

我有一个只有一个页面的应用程序,可以直接从 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 时,它会发出简单的水化警告。

任何想法?

components router nuxtjs3 nuxt-link
1个回答
0
投票

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>
© www.soinside.com 2019 - 2024. All rights reserved.