[Vuejs]-How to detect v-for complete event in slot-template?

by

0👍

here are the two examples that you can use, hope you can take this forward:

new Vue({
  el: '#app1',
  data: {
    items: [1, 3, 5, 10]
  },
  methods: {
    checkIfVForIsComplete() {
      console.log('v-for complete - app 1')
    },
  },
})

new Vue({
  el: '#app2',
  data: {
    items: [1, 3, 5, 10]
  },
  methods: {
    checkIfVForIsComplete() {
      console.log('v-for complete - app 2')
    },
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app1">
  <div
    v-for="(item, index) of items"
    :key="item" :class="index === items.length - 1 ? checkIfVForIsComplete() : null"
  >
    {{ index }} {{ items.length }}
  </div>
</div>

<div id="app2">
  <div v-for="(item, index) of items">
    {{ index === items.length - 1 ? checkIfVForIsComplete() : null }}
    {{ index }} {{ items.length }}
  </div>
</div>

Leave a comment