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?

Lassi Uosukainen · Accepted Answer · 2017-11-01 10:03:24Z

2

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.

answered Nov 1, 2017 at 10:03

Lassi Uosukainen

1,68815 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related