为 v-for 模板中的加载事件绑定 this答案

【问题标题】：Bind this for load event in v-for template为 v-for 模板中的加载事件绑定 this
【发布时间】：2021-05-19 08:42:09
【问题描述】：

有没有办法在遍历数组时在模板中绑定给定的数据道具？

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

因此，如果在此期间（直到图像被加载）someDataVar 将被更改，我仍然想在 onImageLoaded 中输出 someDataVar 的原始值 图像被 for 循环添加到 DOM 时。

PS：我尝试过使用 IIFE，但没有成功

【问题讨论】：

也许是我，但我真的不明白这个问题。 @load="onImageLoaded.bind(this, someDataVar)" 实际上应该做什么？
在加载图像时做一些魔术。但这里的图片只是一个例子，你可以在那里有任何类型的异步事件

标签： javascript vue.js binding bind

【解决方案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>

【讨论】：