vue.js - 如何在 vue js 上的循环(超过 1 个循环)完成后调用方法？

Question

我的 vue 组件是这样的:

<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>

如果三个循环完成，我想调用一个方法

所以当三个循环完成时该方法就会被执行

我该怎么做？

Answer 1

正如所 promise 的，这里是示例。

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>