小编Man*_*ngh的帖子

当我尝试更新 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;
    },
})

在模板中显示产品图像就像

<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 中更新，但会出现此错误，为什么？ …

使用Vue3

父组件

<template>
   <div class="col-12 col-lg-12">
        <input-image v-model="imageFile"/>                                                            
   </div>
</template>

<script>
import InputImage from "@/Pages/components/InputImage";
export default{
   components : {
       InputImage,
   },
    
   data() {
       return {
          imageFile : null,
       }
   }
}
</script>

输入图像（子）组件

<template>
    <div class="form-group">
        <div
            class="base-image-input"
            :style="{ 'background-image': `url(${imageData})` }"
            @click="chooseImage"
        >
            <span v-if="!imageData" class="placeholder">Featured Image </span>
            <input
            class="file-input"
            ref="fileInput"
            type="file"
            @input="onSelectFile"
            />
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      imageData: null,
    };
  },

  methods: {
    chooseImage() {
      this.$refs.fileInput.click();
    },

    onSelectFile() {
      const …