在 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

定义一个'directive'。试试这个。

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>

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

Bind this for load event in v-for template

javascript

binding

bind

vue.js