Есть ли способ привязать заданную опору данных в шаблоне во время цикла по массиву?

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

Так что, если тем временем (пока изображение не загрузится) someDataVar будет изменен, я все равно хочу вывести в onImageLoaded исходное значение someDataVar в то время, когда изображение было добавлено в DOM циклом for.

PS: Я пробовал с IIFE, но это не сработало

1
stackoverflow 16 Фев 2021 в 16:33

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>
2
小聪聪到此一游 25 Фев 2021 в 15:10