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

Posted 2023-02-23

【中文标题】为 v-for 模板中的加载事件绑定 this

【英文标题】：Bind this for load event in v-for template

【发布时间】：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)" 实际上应该做什么？

在加载图像时做一些魔术。但这里的图片只是一个例子，你可以在那里有任何类型的异步事件

【参考方案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>