Does vue.js not trigger a load event for img when v-if is used?

Question

I want to give users of a social login the chance to logout when necessary.

To do so if add an img that calls the logout url, when the logout is done I want to remove the button but the onload of the img is not triggered. Here a similiar issue is posted here . In my case the initial signouturl is an empty string.

<button v-on:click="signout(socialLogout.provider)">
Logout
<img v-if="socialLogout.signoutUrl" hidden v-bind:src="socialLogout.signoutUrl" v-on:load="signout"/>
</button>

The workflow is 1. users does login 2. button gets visible, logouturl is filled with "https://www.google.com/accounts/Logout" 3. user clicks the button, the img-request is done, google does the logout. BUT the v-on:load function in the img-tag is not triggered.

I did a workaround with $nextTick to accomplish my task but i am still wounding if this might be a bug inside vuejs?

Answer 1

Yes it is triggered as you can see on this example: https://codesandbox.io/s/ym91z4wkz.

Your problem is probably that the src url is not to an image, so that's why the event doesn't fire. As you can see the onload event here is fired when src is to an image, but with your url it is not.