Currently, I am working on generating a base64 string to represent an image and passing that image data to a child component as part of an object property.
The object class I am using for this purpose has an image property along with some other properties. Interestingly, when the parent component updates either otherData or id, everything works smoothly and I see the changes reflected in the child component. However, whenever the image property is updated, the new image does not show up until I make a change to a different property within MyDataModel instance. For instance, modifying otherData triggers the display of the updated image on screen. This makes me wonder if the size of the image encoded in base64 (320x240 and around 150KB) might be causing Vue's change detection mechanism to struggle.
export default class MyDataModel {
public id!: string;
public image!: string;
public otherData: string;
constructor(init?: Partial<MyDataModel>) {
Object.assign(this, init);
}
}
In the parent component, I define a new object to hold the data for the child component:
private childData = new MyDataModel();
This is how I create the image in the parent component:
const data = this.$refs.cameraCanvas.toDataURL('image/png');
this.capturedImageData = data;
Subsequently, I assign the capturedImageData to the image property:
this.childData.image = this.capturedImageData;
The childData is then passed as a property to the child component:
<ChildComponent :data="childData"></ChildComponent>
Here's how the data property is declared in the child component:
@Prop({required: true}) private data!: MyDataModel // MyDataModel is a typscript class with an image property
Finally, this is how I attempt to display the image:
<b-img id="input-image" :src="data.image"></b-img>