javascript - 加载或刷新 Ionic 应用程序时出错，但在导航回该应用程序时有效

Question

我对 Vue 的经验很少，而且我也是 Ionic 的新手，所以我不确定这里发生了什么。

我正在尝试将 IonSlides 添加到我的应用程序中，但在加载或刷新页面时总是会出错，但是如果我导航到其他站点然后在浏览器中点击返回按钮，它会按预期工作。为了清楚起见，我使用 运行项目，在它不起作用时ionic serve打开它，然后导航到 google.com，点击浏览器中的后退按钮导航到它并按预期工作，然后如果我刷新我得到的页面再次出现同样的错误。http://localhost:8100/http://localhost:8100/

错误：

runtime-core.esm-bundler.js?5c40: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/vue-next 
  at <Anonymous key=1075 > 
  at <IonSlides pager="true" > 
  at <Slides pack_id="180" > 
  at <Anonymous> 
  at <IonPage isInOutlet=true registerIonPage=fn<registerIonPage> > 
  at <BaseLayout page-title="Pack 180" back-link="/month/6" isInOutlet=true  ... > 
  at <Pack ref=Ref< Proxy {…} > key="/pack/180" isInOutlet=true  ... > 
  at <IonRouterOutlet id="main-content" > 
  at <IonApp> 
  at <App>

Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insert (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:222:16)
    at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3958:9)
    at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3899:13)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3819:21)
    at componentEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4312:21)
    at reactiveEffect (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:71:24)
    at effect (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:46:9)
    at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4277:89)
    at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4235:9)
    at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4195:17)
insert @ runtime-dom.esm-bundler.js?830f:11
mountElement @ runtime-core.esm-bundler.js?5c40:3857
processElement @ runtime-core.esm-bundler.js?5c40:3789
patch @ runtime-core.esm-bundler.js?5c40:3709
componentEffect @ runtime-core.esm-bundler.js?5c40:4211
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
effect @ reactivity.esm-bundler.js?a1e9:17
setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4176
mountComponent @ runtime-core.esm-bundler.js?5c40:4134
processComponent @ runtime-core.esm-bundler.js?5c40:4094
patch @ runtime-core.esm-bundler.js?5c40:3712
patchKeyedChildren @ runtime-core.esm-bundler.js?5c40:4450
patchChildren @ runtime-core.esm-bundler.js?5c40:4333
processFragment @ runtime-core.esm-bundler.js?5c40:4084
patch @ runtime-core.esm-bundler.js?5c40:3705
patchKeyedChildren @ runtime-core.esm-bundler.js?5c40:4414
patchChildren @ runtime-core.esm-bundler.js?5c40:4357
patchElement @ runtime-core.esm-bundler.js?5c40:3981
processElement @ runtime-core.esm-bundler.js?5c40:3792
patch @ runtime-core.esm-bundler.js?5c40:3709
componentEffect @ runtime-core.esm-bundler.js?5c40:4278
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
flushJobs @ runtime-core.esm-bundler.js?5c40:362
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?5c40:264
queueJob @ runtime-core.esm-bundler.js?5c40:258
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
scheduler @ reactivity.esm-bundler.js?a1e9:819
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
set @ reactivity.esm-bundler.js?a1e9:291
GET_PACK_CARDS @ index.js?4360:62
wrappedMutationHandler @ vuex.esm-browser.js?5502:808
commitIterator @ vuex.esm-browser.js?5502:438
eval @ vuex.esm-browser.js?5502:437
_withCommit @ vuex.esm-browser.js?5502:596
commit @ vuex.esm-browser.js?5502:436
boundCommit @ vuex.esm-browser.js?5502:376
eval @ index.js?4360:153
Promise.then (async)
getPackCards @ index.js?4360:151
wrappedActionHandler @ vuex.esm-browser.js?5502:815
dispatch @ vuex.esm-browser.js?5502:488
boundDispatch @ vuex.esm-browser.js?5502:373
mounted @ Slides.vue?6b1b:41
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js?5c40:1910
flushPostFlushCbs @ runtime-core.esm-bundler.js?5c40:333
render @ runtime-core.esm-bundler.js?5c40:4796
mount @ runtime-core.esm-bundler.js?5c40:3019
app.mount @ runtime-dom.esm-bundler.js?830f:1220
eval @ main.js?56d7:38
Promise.then (async)
eval @ main.js?56d7:37
./src/main.js @ app.js:1520
__webpack_require__ @ app.js:854
fn @ app.js:151
1 @ app.js:1892
__webpack_require__ @ app.js:854
checkDeferredModules @ app.js:46
(anonymous) @ app.js:994
(anonymous) @ app.js:997

代码：

<template>
    <base-layout :page-title="`Pack ${pack.id}`" :back-link="`/month/${pack.month_id}`">
        <h2 v-if="!pack">Could not find pack...</h2>
        <slides :pack_id="packId"></slides>
    </base-layout>
</template>

<script>
import Slides from './Slides.vue';
export default {
    components: {
        Slides,
    },
    data() {
        return {
            packId: this.$route.params.id
        }
    },
    watch: {
        '$route'(currentRoute) {
            this.packId = currentRoute.params.id;
        },
    },
    computed: {
        pack() {
            return this.$store.getters.pack;
        },
    },
    mounted(){
        this.$store.dispatch('getPack', {id: this.packId});
    }
}
</script>

幻灯片.vue

<template>
    <ion-slides pager="true">
        <ion-slide 
            v-for="slide in slides"
            :key="slide.id">
                <card :card_id="slide.id"></card>
        </ion-slide>
    </ion-slides>
</template>

<script>
import {
    IonSlides, IonSlide
    } from '@ionic/vue';
import Card from './Card.vue';
export default {
    props: ['pack_id'],
    components: {
        IonSlides, IonSlide,
        Card
    },
    data() {
        return {
            packId: this.$route.params.packId,
        }
    },
    setup() {
        // Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
        const slideOpts = {
        initialSlide: 1,
        speed: 400
        };
        return { slideOpts }
    },
    computed: {
        slides() {
            return [...this.$store.getters.packCards];
        }
    },
    mounted(){
        this.$store.dispatch('getPackCards', {id: this.pack_id ?? this.packId});
        
    }
}

 </script>

我想我在某个地方犯了一些小错误，有人可以帮忙吗？谢谢。

编辑：

我想，我想出了问题所在，但我不知道如何解决它。

在 Slides.vue 中：

computed: {
        slides() {
            return this.$store.getters.packCards
        }

上面的代码首先返回一个带有空数组目标的代理，或者如果我设置了一些默认值，但随后

    mounted(){
        this.$store.dispatch('getPackCards', {id: this.pack_id ?? this.packId});
    }

更新this.$store.getters.packCards和幻灯片无法重新渲染。

我尝试使用createdorbeforeMount代替mounted，但它是一样的。

编辑2：

我设法通过添加来解决问题，v-if="slides.length>0"但<ion-slides pager="true" v-if="slides.length>0">恐怕这不是最佳解决方案。什么是正确的方法？

标签： javascriptvue.jsionic-frameworkion-slides