Javascript 执行计划程序刷新期间出现未处理的错误。这可能是一个Vue内部错误

在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>

如果我添加硬编码的幻灯片，它不会显示任何错误。但是如果我使用

v-for

循环动态添加幻灯片，则会显示上述错误

我以以下方式添加了幻灯片：

这是模板：

<Suspense>
  <template #default>
    <product-details></product-details>
  </template>
  <template #fallback>
    Product is loading...
  </template>
</Suspense>

幻灯片1

以下是脚本：

导出默认值{
名称：“产品详细信息”，
组成部分：{
爱雍容，
IonHeader，
伊恩佩奇，
IonTitle，
IonToolbar，
离子滑道，
伊恩斯利德，
},
数据（）{
返回{
产品：{}，
};
},
设置（）{
//要传递给swiper实例的可选参数。请参阅http://idangero.us/swiper/api/ 获取有效选项。
常数slideOpts={
首张幻灯片：1，
速度:400,，
};
返回{slideOpts}；
},
挂载：函数（）{
取回（“http://localhost:4000/api/products/“+此.$route.params.id{
方法：“获取”，
})
。然后（（响应）=>{
返回response.json（）；
})
.然后（（jsonData）=>{
this.product=jsonData；
//console.log（jsonData.product_images）；
});
},
};

---

我在代码中做错了什么？

可以说，这个错误消息可以改进

该错误是由于尝试使用

v-for

遍历不可iterable（在您的示例中为

undefined

）而导致的。具体地说，在

mount（）

中进行的调用返回之前，

product.product\u image

是

未定义的，因为您将
product
作为空对象启动

Vue 2风格的解决方案


将
product.product\u图像实例化为iterable：


/。。。
数据：（）=>（{
产品：{product_图像：[]}
})

或者在模板中提供一个空数组作为回退：

<Suspense>
  <template #default>
    <product-details></product-details>
  </template>
  <template #fallback>
    Product is loading...
  </template>
</Suspense>


幻灯片1

或者在
v-for
的父级上放置一个
v-if
：


...


Vue 3风格解决方案

通过提供
异步设置
功能，使整个
ProductDetails
组件暂停。在
设置
功能中，调用以获取产品。

概念证明：

/。。。
异步设置（）{
const product=等待获取（“http://localhost:4000/api/products/" + 
此.$route.params.id{
方法：“获取”，
}).then（r=>r.json（））；
返回{product}
}

现在将
放入
的
中，提供一个回退模板（当
解析其默认模板中的所有异步组件时，将呈现该模板）：


产品正在加载。。。

使用
的美妙之处（和优雅之处）在于，父级不需要知道尚未呈现标记的实际情况。它只是等待所有可挂起的组件解析。

简而言之，使用
您不再需要使用
v-if
s将呈现逻辑硬编码到模板中，并在包装器上以清除方式指定条件。每个异步子组件都包含自己的条件，并且它向父组件宣布的全部内容是：我完成了。完成所有操作后，将呈现它们。
在具有格式错误的挂钩（
创建的
，
挂载的
等）时也会遇到此错误。在我的例子中，创建的
是一个对象而不是一个函数

坏的：

好:

Vue说这是他们的错误。“也许你应该照上面说的去做，并和他们提出一个问题。”塞米通，你介意我重新表述你的答案吗？基本上，除了修复，人们不太关心其他任何事情，所以答案应该简单地集中在这一点上，我一点也不介意，请继续！我太新了，所以我还不知道它是怎么工作的。
created: { /* some code */ }

created() { /* some code */ }
// or...
created: function() { /* some code */ }