vue.js - 在 vue 组件上循环完成后如何调用语句或方法？

Question

我的 vue 组件是这样的:

<template>
    <div class="row">
        <div class="col-md-3" v-for="item in items">
            ...
        </div>
    </div>
</template>
<script>
    export default {
        ...
        computed: {
            items() {
                ...
            }
        },
        ...
    }
</script>

如果循环完成，我想调用一个语句或方法

所以语句在循环完成时执行

我该怎么做？

更新:

根据 Kira San 的回答，我这样尝试:

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

控制台日志不显示

我的项目是对象

如果在 items 中执行 console.log(n)，结果如下:

Answer 1

看这个例子。

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>