How can I call a method after the loops(more than 1 loop) complete on vue js?

Question

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?

Why would you ever want something like this? You should never let the presentation control anything, it's the other way around! — Andrey Popov
– Andrey Popov, Commented Jul 20, 2017 at 18:06

Ikbel · Accepted Answer · 2017-07-25 22:20:04Z

5

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>

edited Jul 25, 2017 at 22:20

answered Jul 20, 2017 at 12:26

Ikbel

7,8513 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Vamsi Krishna Over a year ago

Perfect... I forgot about the re-rending,,,,my mistake , and thank you for pointing it out...+1 :)

Ikbel Over a year ago

@VamsiKrishna My pleasure :)

moses toh Over a year ago

@Ikbel, I use export default{...} like my code on the question. Where I put this var counter = 0?

Ikbel Over a year ago

@TrendingNews see my edited answer. Instead of defining counter outside of your vue instance. Use mounted callback to create it within Vue without making it reactive. This should be a better solution.

moses toh Over a year ago

@Ikbel, Okay. Thanks. I try like this : <script> let counter = 0 export default { ... } </script. I also works.

|

Collectives™ on Stack Overflow

How can I call a method after the loops(more than 1 loop) complete on vue js?

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related