title: Vuejs 2: how to detect img.complete property
body: <p>I have code that fetches a list of images as an object like</p>
  
  <pre><code>[
    { src: '/path/to/img.jpg', loaded: false },
    ...
  ]
  </code></pre>
  
  <p>and template that then renders them as HTML like:</p>
  
  <pre><code>&lt;div
    v-for="image in alltheimages"
    :key="image.id" &gt;
    &lt;transition name="fade" appear&gt;
    &lt;img
      :src="image.src"
      v-show="image.loaded"
      @load="image.loaded = true"
      /&gt;
    &lt;/transition&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This works well when first loading the page; the images fade in as soon as they're loaded.</p>
  
  <p>However there's a problem when the image is <strong>already loaded in cache</strong> because then the <code>@load</code> never fires on the new <code>&lt;img&gt;</code> element. In these situations I can check the DOM img tag's <code>.complete</code> property, but how can I do that in VueJS?</p>
  
  <p>I've tried <code>v-show="this.complete || image.loaded"</code> but <code>this</code> just points to <code>window</code>. I thought I could use a method call and pass a reference to the element which initiated the call, but I can't find out how to do that either.</p>
  
  <p>I realise I could load all the images separately with <code>new Image()</code>, bind a listenter to the <code>load</code> event before I provide <code>src</code> and from there update the data to say the thing is loaded, but that a whole lotta code and objects - be much nicer to be able to use the DOM elements Vue creates.</p>