vue3 无法读取 null 的属性“insertBefore”
2021-06-06
15863
当我尝试在 vuejs 中更新数据字段时出现此错误。
data() {
return {
form : useForm({
imageFile : null,
img_id : null,
}),
product_images : this.images,
}
},
在这里，我在用户发送的发布请求成功后更新 product_images。
像这样。
this.form.post(url, {
onStart : () => {
Inertia.on('progress', (event) => {
if (event.detail.progress.percentage) {
NProgress.set((event.detail.progress.percentage / 100) * 0.98);
}
});
},
onFinish : () => {
this.product_images = this.images;
},
})
在模板中显示 product_images 如下
<div v-for="image in product_images" class="col-xl-4 col-lg-6 col-12 mb-3" :key="image.id">
<input-image @changeImage="onChangeImage" :id="image.id" :image="image.image" />
</div>
当 product_images 在发布请求后发生变化时，product_images 不会在 DOM 中更新，但出现此错误，为什么？
app.js:12889 Uncaught (in promise) TypeError: Cannot read property 'insertBefore' of null
at insert (app.js:12889)
at mountElement (app.js:9604)
at processElement (app.js:9545)
at patch (app.js:9465)
at patchKeyedChildren (app.js:10315)
at patchChildren (app.js:10093)
at processFragment (app.js:9839)
at patch (app.js:9461)
at patchKeyedChildren (app.js:10174)
at patchChildren (app.js:10117)
3个回答
不幸的是，vue 错误消息没有什么帮助。
就我而言，我在 html 模板中有一些未初始化的数据，如下所示：
<template>
<div>
{{ data.xyz }}
</div>
</template>
将其更改为：
<template v-if="!!data">
<div>
{{ data.xyz }}
</div>
</template>
或者：
<template>
<div>
{{ data?.xyz }}
</div>
</template>
Tobias Ernst
2021-06-22
我通过将 Vue 更新到最新版本 ( [email protected] ) 来修复此问题。
lorenzo373
2021-10-28
就我而言，错误地调用了两次
app.mount('#app'
)。
James Lawruk
2022-11-03