我的 vue 组件是这样的:
<div class="row"><div class="col-md-3" v-for="item1 in items1">...<div class="col-md-3" v-for="item2 in items2">...
<div class="col-md-3" v-for="item3 in items3">...
</模板><脚本>导出默认{...计算:{项目1(){const n = ...//这是对象返回 n},项目2(){const n = ...//这是对象返回 n},项目3(){const n = ...//这是对象返回 n}},...}
如果三个循环完成，我想调用一个方法
所以该方法在三个循环完成时执行
我该怎么做?
正如承诺的那样，这是示例.
var counter = 0const vm = 新的 Vue({el: '#app',计算:{项目1(){返回 {item1: 'value1', item2: 'value2'}},项目2(){返回 {item1: 'value3', item2: 'value4'}},项目3(){返回 {item1: 'value5', item2: 'value6'}}},方法: {打回来() {计数器++console.log('v-for 循环完成')var numberOfLoops = 3如果(计数器> = numberOfLoops){console.log('所有循环都已执行完毕.')计数器 = 0}}},指令:{forCallback(el, binding, vnode) {让元素 = binding.valuevar key = element.key变量长度 = 0如果 (Array.isArray(element.array)) {len = element.array.length}else if (typeof element.array === 'object') {var 键 = Object.keys(element.array)key = keys.indexOf(key)len = 键.长度}如果(键 == len - 1){if (typeof element.callback === '函数') {(element.callback.bind(vnode.context))()}}}},})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script><div id="应用程序"><div class="row"><div class="col-md-3" v-for="(item, key) in items1" v-for-callback="{key: key, array: items1, callback: callback}">...<div class="col-md-3" v-for="(item, key) in items2" v-for-callback="{key: key, array: items2, callback: callback}">...
<div class="col-md-3" v-for="(item, key) in items3" v-for-callback="{key: key, array: items3, callback: callback}">...
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>
这篇关于在 vue js 上完成循环(超过 1 个循环)后如何调用方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
