在v-for模板中绑定这个for load事件

Question

是否有办法在模板中绑定给定的数据道具，而循环数组?

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

所以如果在此期间(直到图像被加载)someDataVar将会被改变，我仍然想在onImageLoaded中输出someDataVar的原始值当图像被for循环添加到DOM中时，

PS:我已经尝试过IIFE，但它没有工作

Answer 1

定义一个指令。试试这个。

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>