イメージがロードされているメソッドを実行し

Question

私はイメージが完全にロードされたときにメソッドを実行しようとしてきたが、それは単に私の関数が存在しないエラーがスローされます。

Uncaught ReferenceError: imageLoaded is not defined at HTMLImageElement.onload (projetos:1)

はここに私のコードですが：

<template> 
    <div class="card"> 
    <h2>{{projeto.nome}}</h2> 
    <div class="row"> 
     <div class="col-sm-10 col-sm-offset-1" id="img-container"> 
     <img :src="projeto.foto" :alt="projeto.nome" onload="imageLoaded()"> 
     <div class="row" id="info"> 
      <div class="col-xs-6">Conclusão: {{projeto.duracao}}</div> 
      <div class="col-xs-6">Projeto realizado em {{projeto.ano}}</div> 
      <br><br> 
      <p>{{projeto.descricao}}</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</template> 
<script> 
import { eventBus } from "../../main"; 

export default { 
    props: ["projeto"], 
    methods: { 
    imageLoaded() { // the function i want to execute 
     eventBus.loading(false); 
    } 
    } 
}; 
</script> 

私は:load=""（私はそれが存在しない発見ウィッヒ）を使用して試したし、私の輸出デフォルトの範囲外の機能を配置します。私の画像はv-forにあるので、これを達成する最良の方法はonloadだと思います。

もっと良い方法がありますか？これどうやってするの？私は使用できる指令がありますか？何か間違っているのですか？

Answer 1

@click=""などのようにDOMイベントをリスンするには、v-onの指示文または略語@を使用します。したがって、@load="imageLoaded()"が動作するはずです。