在Vue.js中创建幻灯片时出现以下错误：
[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=1 >
at <Anonymous pager="true" options= {initialSlide: 1, speed: 400} >
at <Anonymous fullscreen=true >
at <IonPage isInOutlet=true registerIonPage=fn<registerIonPage> >
at <Product Details ref=Ref< Proxy {…} > key="/products/1" isInOutlet=true ... >
at <IonRouterOutlet>
at <IonApp>
at <App>
未捕获(承诺中)DOMException：未能在"Node"上执行"insertBefore"：要插入新节点的节点不是此节点的子节点
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)
如果我添加硬编码的幻灯片，它不会显示任何错误。但是，如果我使用v-for循环动态添加幻灯片，则会显示上述错误。
我以以下方式添加了幻灯片：
这是模板：
<ion-slides pager="true" :options="slideOpts">
<ion-slide v-for="image in product.product_images" v-bind:key="image.id">
<h1>Slide 1</h1>
</ion-slide>
</ion-slides>
这是脚本：
export default {
name: "Product Details",
components: {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar,
IonSlides,
IonSlide,
},
data() {
return {
product: {},
};
},
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 };
},
mounted: function () {
fetch("http://localhost:4000/api/products/" + this.$route.params.id, {
method: "get",
})
.then((response) => {
return response.json();
})
.then((jsonData) => {
this.product = jsonData;
// console.log(jsonData.product_images);
});
},
};
我在代码中做错了什么？
可以说，错误消息可以在这个消息上得到改进。
该错误是由于尝试使用v-for迭代不可迭代的(在您的案例中为undefined)而导致的。具体来说，在mount()中进行的调用返回之前，product.product_images是undefined，因为您将product初始化为空对象。
Vue 2风格的解决方案
- 将
product.product_image实例化为可迭代的：
//...
data: () => ({
product: { product_images: [] }
})
或者在模板中提供一个空数组作为后备：
<ion-slide v-for="image in product.product_images || []" v-bind:key="image.id">
<h1>Slide 1</h1>
</ion-slide>
或者在v-for:的父级上放置v-if
<ion-slides pager="true" :options="slideOpts" v-if="product.product_images">
...
</ion-slides>
Vue 3型解决方案
通过赋予async setup函数，使整个ProductDetails组分可悬浮。在setup函数中，调用以获取产品
概念验证：
//...
async setup() {
const product = await fetch("http://localhost:4000/api/products/" +
this.$route.params.id, {
method: "get",
}).then(r => r.json());
return { product }
}
现在将<product-details>放入<Suspense>的<template #default>中，提供一个回退模板(当<Suspense>解析其默认模板中的所有异步组件时，将呈现该模板)：
<Suspense>
<template #default>
<product-details></product-details>
</template>
<template #fallback>
Product is loading...
</template>
</Suspense>
使用<Suspense>的美妙之处(和优雅之处)在于，父级不需要知道标记尚未呈现的实际条件。它只是等待所有可挂起的组件得到解决
简而言之，使用<Suspense>，您不再需要使用v-if将呈现逻辑硬编码到模板中，并在包装器上以clear指定条件。每个异步子组件都包含自己的条件，它向父组件宣布的只是：我完成了。完成所有操作后，将对其进行渲染。
此外，不要忘记等待您的元素，否则您也会收到此错误。在我的情况下，会话存储初始化功能登录后vue3，pinia；)
这为我修复了这个错误。
有错误：
describe('App', () => {
it('test 1', () => {
const wrapper = shallowMount(Component)
expect(wrapper.find('h2').text()).toEqual("my text")
})
it('test 2', () => {
const wrapper = shallowMount(Component)
expect(wrapper.find('h3').text()).toEqual("my othertext")
})
})
无：
describe('App', () => {
const wrapper = shallowMount(Component)
it('test 1', () => {
expect(wrapper.find('h2').text()).toEqual("my text")
})
it('test 2', () => {
expect(wrapper.find('h3').text()).toEqual("my othertext")
})
})
在具有格式错误的挂钩(created、mounted等)时也遇到此错误。在我的情况下，created是一个对象而不是函数。
坏：
created: { /* some code */ }
良好：
created() { /* some code */ }
// or...
created: function() { /* some code */ }