Vuejs 2: jak wykryć właściwość img.complete

Question

Mam kod, który pobiera listę obrazów jako przedmiot jak

[ 
    { src: '/path/to/img.jpg', loaded: false }, 
    ... 
] 

i szablonu, który następnie czyni je jako HTML jak:

<div 
    v-for="image in alltheimages" 
    :key="image.id" > 
    <transition name="fade" appear> 
    <img 
    :src="image.src" 
    v-show="image.loaded" 
    @load="image.loaded = true" 
    /> 
    </transition> 
</div> 

Działa to dobrze przy pierwszym ładowaniu strony; obrazy znikną, gdy tylko zostaną załadowane.

jednak pojawia się problem, gdy obraz jest już załadowany w pamięci podręcznej bo wtedy nigdy @load odpala na nowym <img> elementu. W takich sytuacjach mogę sprawdzić właściwość DOM img tagu .complete, ale jak mogę to zrobić w VueJS?

Próbowałem już v-show="this.complete || image.loaded", ale this wskazuje tylko na window. Pomyślałem, że mógłbym użyć wywołania metody i przekazać odwołanie do elementu, który zainicjował połączenie, ale nie mogę również dowiedzieć się, jak to zrobić.

Zdaję sobie sprawę, mogę załadować wszystkie obrazy oddzielnie new Image(), powiązać listenter do zdarzenia load zanim zapewnić src a stamtąd zaktualizować dane mówią, że sprawa jest załadowany, ale że cały kod lotta i obiekty - być o wiele ładniej, aby móc używać elementów DOM tworzonych przez Vue.

Answer 1

Można powiązać z natywnym zdarzeniem onLoad i wywołać dowolną metodę w danym komponencie. demo

<div id="app"> 
    <img v-for="num in [1,2,3,4]" 
     src="http://lorempixel.com/400/200" 
     :onLoad="onLoadHandler()" /> 
</div> 


new Vue({ 
    el: '#app', 
    methods: { 
     onLoadHandler: function() { 
      alert('hi'); 
     } 
    } 
}); 

Answer 2

v-płaszcz może zapewnić funkcjonalność szukasz https://vuejs.org/v2/api/#v-cloak