How can I call a statement or method after the loop complete on vue component? - vue.js

Question

My vue component like this :
<template>
<div class="row">
<div class="col-md-3" v-for="item in items">
...
</div>
</div>
</template>
<script>
export default {
...
computed: {
items() {
...
}
},
...
}
</script>
If the loop complete, I want to call a statement or method
So the statement is executed when the loop completes
How can I do it?
Update :
From Kira San answer, I try like this :
<template>
<div class="row">
<div class="col-md-3" v-for="(item, key) in items" v-for-callback="{key: key, array: items, callback: callback}">
...
</div>
</div>
</template>
<script>
export default {
...
computed: {
items() {
const n = ...
return n
}
},
directives: {
forCallback(el, binding) {
let element = binding.value
if (element.key == element.array.length - 1)
if (typeof element.callback === 'function') {
element.callback()
}
}
},
methods: {
callback() {
console.log('v-for loop finished')
}
}
}
</script>
The console log not display
My items is object
If do console.log(n) in items, the result like this :

Answer 1

Look at this example.
new Vue({
el: '#app',
computed: {
items() {
return {item1: 'value1', item2: 'value2'}
}
},
methods: {
callback() {
console.log('v-for loop finished')
}
},
directives: {
forCallback(el, binding) {
let element = binding.value
var key = element.key
var len = 0
if (Array.isArray(element.array)) {
len = element.array.length
}
else if (typeof element.array === 'object') {
var keys = Object.keys(element.array)
key = keys.indexOf(key)
len = keys.length
}
if (key == len - 1) {
if (typeof element.callback === 'function') {
element.callback()
}
}
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
<div class="row">
<div class="col-md-3" v-for="(item, key) in items" v-for-callback="{key: key, array: items, callback: callback}">
...
</div>
</div>
</div>

Answer 2

You can accomplish that with a directive.
Example usage:
<div class="col-md-3" v-for="(item, key) in items" v-for-callback="{key: key, array: items, callback: callback}">
<!--content-->
</div>
Create a new directive for-callback which will keep track of the elements that was rendered with v-for. It will basically check if the current key is the end of the array. If so, it will execute a callback function that you provide.
Vue.directive('for-callback', function(el, binding) {
let element = binding.value
if (element.key == element.array.length - 1)
if (typeof element.callback === 'function') {
element.callback()
}
})
Or if you don't want to define it globally. Add this to your component options instead:
directives: {
forCallback(el, binding) {
let element = binding.value
if (element.key == element.array.length - 1)
if (typeof element.callback === 'function') {
element.callback()
}
}
}
v-for-callback expects an options object.
{
key: key, // this will contain the item key that was generated with `v-for`
array: items, // the actual `v-for` array
callback: callback // your callback function (in this example, it's defined in the component methods
}
Then in your component options:
methods: {
callback() {
console.log('v-for loop finished')
}
}

Answer 3

You can do with an if inside the loop, like this:
<template>
<div class="row">
<div class="col-md-3" v-for="(item, index in items)">
<div v-if="index === items.length -1">
Display what ever you want here
<\div>
</div>
</div>
</template>
Or if you want to do something in js then call a function when the same condition is true, like this:
<div class="col-md-3" v-for="(item, index in items)">
<div v-if="index === items.length -1 && lastIteration()">
Display what ever you want here
<\div>
</div>
methods: {
lastIteration() {
alert("last");
}
}
I didn't test it but the ideea is good and it should work. Hope to answer your question :)