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

【问题标题】：How can I call a statement or method after the loop complete on vue component?在 vue 组件上循环完成后如何调用语句或方法？
【发布时间】：2017-12-25 14:59:22
【问题描述】：

我的 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)，结果是这样的：

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案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>

【讨论】：

好像和我的代码一样。但是为什么我的代码不起作用
好吧，我不知道，但在你的情况下肯定有其他东西不起作用。尝试发布代码，以便我们查看问题所在。
看我的问题。我已经更新了。我的物品是对象。也许这就是它不起作用的原因
@TrendingNews 好的，我更新了我的答案。现在它也适用于数组和对象。
我想问。例如，我有 3 个循环。循环完成时如何调用语句

【解决方案2】：

您可以通过directive 来完成此操作。

使用示例：

<div class="col-md-3" v-for="(item, key) in items" v-for-callback="{key: key, array: items, callback: callback}">
  <!--content-->
</div>

创建一个新指令for-callback，它将跟踪使用v-for 呈现的元素。它基本上会检查当前的key 是否是array 的结尾。如果是这样，它将执行您提供的callback 函数。

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()
    }
})

或者，如果您不想全局定义它。将此添加到您的组件选项中：

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 需要一个选项对象。

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

然后在你的组件选项中：

methods: {
    callback() {
        console.log('v-for loop finished')          
    }
}

【讨论】：

此代码：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() } })。代码放在哪里？我仍然很困惑。是否在导出默认 {...} 中？
在创建你的 vue 实例之前把它放在你的主 javascript 文件中。
@TrendingNews 查看我编辑的答案。您也可以直接在组件中定义指令。
如果代码执行，它不会显示console.log

【解决方案3】：

您可以在循环中使用 if，如下所示：

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

或者如果你想在js中做一些事情然后在相同的条件为真时调用一个函数，像这样：

 <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");
}
}

我没有测试它，但这个想法很好，它应该可以工作。希望回答你的问题:)

【讨论】：