Question

I've been trying to execute a method when a image has fully loaded, but it simply throws an error that my function doesn't exists:

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

Here's my code:

<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>

I've tried using :load="" (wich i discovered that doesn't exists) and placing a function outside my export default scope. Since my images are in a v-for i think onload is the best way of achieving this.

So is there a better way? How can i do this? Is there a directive i can use? Am i doing something wrong?

Answer 1

使用v-on指令或简写@来监听DOM事件，就像使用@click=""一样 - 所以@load="imageLoaded()"应该有效。

Execute a method when image is loaded

1 个答案: