点击修改按钮图片显示有问题

问题可能出在表单数据的初始化上。在 ave-form.vue 中,我们需要处理一下从后端返回的图片数据,因为它们可能是 JSON 字符串格式。

vue:src/views/tools/fake-strategy/components/ave-form.vue
// ... existing code ...

  @Watch('value')
  watchValue(v: any) {
    this.$nextTick(() => {
      this.getProducts()
      // 处理图片数据
      const formData = {
        ...v,
        productPhotos: v.productPhotos ? JSON.parse(v.productPhotos) : [],
        purchaseRecords: v.purchaseRecords ? JSON.parse(v.purchaseRecords) : []
      }
      this.form = formData
    })
  }

// ... rest of the code ...

主要修改:

  1. watchValue 方法中,我们对 productPhotospurchaseRecords 字段进行了特殊处理
  2. 使用 JSON.parse 将字符串转换为数组
  3. 如果字段不存在或解析失败,则使用空数组作为默认值

这样修改后:

  • 当点击修改按钮打开表单时,图片数据会被正确解析
  • 图片组件会收到正确格式的数组数据
  • 图片应该能够正常显示了

这个修改假设后端返回的图片数据是 JSON 字符串格式。如果格式不同,我们可能需要做相应的调整。你能告诉我后端返回的图片数据具体是什么格式吗?

  • 后端返回的就是 JSON 字符串格式 的图片数据

点击修改按钮图片显示有问题_第1张图片

你可能感兴趣的:(产品资质管理系统,vue)