Bind this for load event in v-for template

Question

Is there a way to bind a given data prop in template while looping over array?

<div v-for="(page, pageIndex) in pages" :key="pageIndex">
    <img 
        :src="" 
        @load="onImageLoaded.bind(this, someDataVar)" 
    />
</div>

So if in the meantime (until the image gets loaded) someDataVar will gonna be changed, I still want to output in onImageLoaded the original value of someDataVar at the time the image was added to DOM by the for-loop.

PS: I've tried with IIFE but it didn't worked

Answer 1

define a 'directive'. try this.

new Vue({
  el: '#app',
  data () {
    return {
      pages: [1,2,3],
      someDataVar: 'someData'
    }
  },
  mounted () {
    setTimeout(() => {
      this.someDataVar = 'otherData'
    }, 1000)
  },
  directives: {
    'init-val': {
      inserted: (el, binding) => {
        el.dataset.initVal = binding.value
      }
    }
  },
  methods: {
    onImageLoaded (event) {
      console.log(event.target.dataset)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(page, pageIndex) in pages" :key="pageIndex">
    <div 
        v-init-val="someDataVar"
        @click="onImageLoaded"
    >click me!</div>
  </div>
</div>