laravel - vue3 无法读取 null 的属性 'insertBefore'

Question

当我尝试更新 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>

当 post 请求后 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)

Answer 1

不幸的是，vue 错误消息不是很有帮助。
就我而言，我在 html 模板中有一些未初始化的数据，如下所示:

<template>
    <div>
        {{ data.xyz }}
    </div>
</template>

将此更改为:

<template v-if="!!data">
    <div>
        {{ data.xyz }}
    </div>
</template>

或者:

<template>
    <div>
        {{ data?.xyz }}
    </div>
</template>