I'm trying to download a file on click of a button. My specific method is as follows:

1. On button click, I call an API that returns the buffered data of the file.
2. Convert the buffered data to a base64 URL, and use this base64 URL to update the href attribute of the <a> element.
3. Call the click event of the <a> element inside the function.

This method will download the file, but it will keep downloading the file indefinitely, I'm not sure why this is happening and don't know how to fix this.

This is how I call this function.

<button v-on:click="this.getImage([imageID, imageName], $event)"><a>View scoresheet</a></button>

This is the code of the function:

getImage: async function(info, event){
    fetch('endpoint' + String(info[0]) + "/" + String(info[1]) , {
        method: 'GET',
      
        })
        .then(response => response.json())
        .then(async result => {
             var image_data = await result.image_buffer.data
             var imgSrc = "data:image/jpg;base64," + btoa(
                 image_data.reduce((data, byte) => data + String.fromCharCode(byte), '')
             );

             event.target.href = imgSrc
             event.target.download = 'image.jpg'
             event.target.click()
        })
    },