My vue component like this :
<template>
<div class="row">
<div class="col-md-3" v-for="item1 in items1">
...
</div>
<div class="col-md-3" v-for="item2 in items2">
...
</div>
<div class="col-md-3" v-for="item3 in items3">
...
</div>
</div>
</template>
<script>
export default {
...
computed: {
items1() {
const n = ... // this is object
return n
},
items2() {
const n = ... // this is object
return n
},
items3() {
const n = ... // this is object
return n
}
},
...
}
</script>
If the three loop complete, I want to call a method
So the method is executed when the three loop completes
How can I do it?
As promised, here is the example.
var counter = 0
const vm = new Vue({
el: '#app',
computed: {
items1() {
return {item1: 'value1', item2: 'value2'}
},
items2() {
return {item1: 'value3', item2: 'value4'}
},
items3() {
return {item1: 'value5', item2: 'value6'}
}
},
methods: {
callback() {
counter++
console.log('v-for loop finished')
var numberOfLoops = 3
if (counter >= numberOfLoops) {
console.log('All loops have finished executing.')
counter = 0
}
}
},
directives: {
forCallback(el, binding, vnode) {
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.bind(vnode.context))()
}
}
}
},
})
<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 items1" v-for-callback="{key: key, array: items1, callback: callback}">
...
</div>
<div class="col-md-3" v-for="(item, key) in items2" v-for-callback="{key: key, array: items2, callback: callback}">
...
</div>
<div class="col-md-3" v-for="(item, key) in items3" v-for-callback="{key: key, array: items3, callback: callback}">
...
</div>
</div>
</div>
