{"action":"opened","issue":{"url":"https://api.github.com/repos/vuejs/vue/issues/8044","repository_url":"https://api.github.com/repos/vuejs/vue","labels_url":"https://api.github.com/repos/vuejs/vue/issues/8044/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue/issues/8044/comments","events_url":"https://api.github.com/repos/vuejs/vue/issues/8044/events","html_url":"https://github.com/vuejs/vue/issues/8044","id":315111131,"number":8044,"title":"v-if with <picture> fires load event on removal","user":{"login":"HauntedSmores","id":20644458,"avatar_url":"https://avatars3.githubusercontent.com/u/20644458?v=4","gravatar_id":"","url":"https://api.github.com/users/HauntedSmores","html_url":"https://github.com/HauntedSmores","followers_url":"https://api.github.com/users/HauntedSmores/followers","following_url":"https://api.github.com/users/HauntedSmores/following{/other_user}","gists_url":"https://api.github.com/users/HauntedSmores/gists{/gist_id}","starred_url":"https://api.github.com/users/HauntedSmores/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/HauntedSmores/subscriptions","organizations_url":"https://api.github.com/users/HauntedSmores/orgs","repos_url":"https://api.github.com/users/HauntedSmores/repos","events_url":"https://api.github.com/users/HauntedSmores/events{/privacy}","received_events_url":"https://api.github.com/users/HauntedSmores/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-04-17T15:24:38Z","updated_at":"2018-04-17T15:24:38Z","closed_at":null,"author_association":"NONE","body":"### Version\r\n2.5.16\r\n\r\n### Reproduction link\r\n[https://jsfiddle.net/degal13/eywraw8t/45236/](https://jsfiddle.net/degal13/eywraw8t/45236/)\r\n\r\n### Steps to reproduce\r\n1. Create a picture element with multiple working source child-elements.\r\n2. Attach load event handler to img tag within picture element.\r\n3. Toggle wrapper element or elements themselves with v-if\r\n4. Check how many times load event fires.\r\n\r\n### What is expected?\r\nRemoving picture elements with v-if should not cause additional firing of the load event on the image.\r\n\r\n### What is actually happening?\r\nRemoving picture elements with v-if is causing additional firing of the load event on the image.\r\n\r\n---\r\nIm working on a project where I have a modal that loads in `<picture>` elements using v-for. The modal itself is triggered via v-if and the picture elements have a handler on the load event (`@load`).\r\n\r\nIn my specific use case, its important to have accurate firing of the load event. The problem is that when I close the modal, the same picture elements are firing the load callback and that should not happen. It doensnt happen with regular `<img/>` elements.\r\n\r\nIf you remove the `<source>` elements, then the problem stops so it looks like it has something to do with the sources triggering the load event.\r\n\r\n<!-- generated by vue-issues. DO NOT REMOVE -->"}}
{"actor":{"display_login":"HauntedSmores"}}