Javascript 加载事件未在Vue.js 2中动态加载的图像上触发

Javascript 加载事件未在Vue.js 2中动态加载的图像上触发,javascript,html,vue.js,vuejs2,Javascript,Html,Vue.js,Vuejs2,Vue:2.5.2,Axios:0.21.1 我试图找出所有的图片是什么时候加载到下面的页面上的。此代码适用于加载时已知图像URL的主页。但在这里,图像是从外部JSON文件加载的,然后添加到页面中。未使用以下代码触发@load事件。我该如何解决这个问题 <template> <div class="container"> <div v-if="loading" class="loading"&g

Vue:2.5.2,Axios:0.21.1

我试图找出所有的图片是什么时候加载到下面的页面上的。此代码适用于加载时已知图像URL的主页。但在这里,图像是从外部JSON文件加载的,然后添加到页面中。未使用以下代码触发@load事件。我该如何解决这个问题

<template>
  <div class="container">
    <div v-if="loading" class="loading">
      Loading...
    </div>

    <div v-if="!loading" class="error">
      <h1>{{ project.title }}</h1>
      <p class="intro">{{ project.description }}</p>

      <div v-for="image in project.images" v-bind:key="image.url" class="images">
        <div class="image">
          <a class="" href="">
            <img @load="handleLoad" :src="'static/projects/'+image.url" :width="image.width" :height="image.height"
                 class="img"/>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Project',
  data () {
    return {
      loading: true,
      project: {},
      error: null,
      imgLoaded: 0
    }
  },
  created () {
    this.fetchData()
  },
  watch: {
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      const fetchedSlug = this.$route.params.slug

      axios.get('/static/data/' + fetchedSlug + '.json')
        .then((response) => {
          if (this.$route.params.slug !== fetchedSlug) return
          this.project = response.data
        }, (error) => {
          this.error = error.toString()
        })
    },
    handleLoad: function () {
      console.log('Load')
      this.imgLoaded++
      if (this.imgLoaded === Object.keys(this.project.images).length) {
        this.loading = false
      }
    }
  }
}
</script>

加载。。。
{{project.title}

{{project.description}

从“axios”导入axios 导出默认值{ 名称:'项目', 数据(){ 返回{ 加载:对, 项目:{}, 错误:null, imgLoaded:0 } }, 创建(){ this.fetchData() }, 观察:{ “$route”:“fetchData” }, 方法:{ 获取数据(){ this.error=this.post=null 这是真的 const fetchedSlug=this.$route.params.slug axios.get('/static/data/'+fetchedSlug+'.json')) 。然后((响应)=>{ 如果(this.$route.params.slug!==fetchedSlug)返回 this.project=response.data },(错误)=>{ this.error=error.toString() }) }, handleLoad:函数(){ console.log('Load')) 这是我的荣幸++ if(this.imgLoaded==Object.keys(this.project.images.length){ 此参数为0。加载=错误 } } } }