Skip to content
Advertisement

vuejs 2 component base64 image not updating

what i want to achieve:
load an image from jwt token protected source
the server return the image as base64 string and i’ll load this string as background url on the image

parent component:

JavaScript

myImage component

JavaScript

now if i delete a photo (splice) from the form.photos array always the last image get removed. when i remove the green image

the blue image disappears

when i check the form.photos array, the correct image was removed, only the img data attribute from myImage component is still the old value from the previous array position 1.

i was able to bypass this issue by adding a watch on the photo prop and refetch the base64 string which cause a new get request for every image

JavaScript

is there any way to remove an array item (child component) and display the correct result without fetching all images again within the child component?

thanks

Advertisement

Answer

Try this.

JavaScript

From the current documentation.

In 2.2.0+, when using v-for with a component, a key is now required.

User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement