点击修改按钮图片显示有问题
问题可能出在表单数据的初始化上。在 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 ...
主要修改:
- 在
watchValue
方法中,我们对productPhotos
和purchaseRecords
字段进行了特殊处理 - 使用
JSON.parse
将字符串转换为数组 - 如果字段不存在或解析失败,则使用空数组作为默认值
这样修改后:
- 当点击修改按钮打开表单时,图片数据会被正确解析
- 图片组件会收到正确格式的数组数据
- 图片应该能够正常显示了
这个修改假设后端返回的图片数据是 JSON 字符串格式。如果格式不同,我们可能需要做相应的调整。你能告诉我后端返回的图片数据具体是什么格式吗?
- 后端返回的就是 JSON 字符串格式 的图片数据