vue 구성 요소에 대한 루프가 완료된 후 어떻게 문 또는 메소드를 호출할 수 있는가?

vue 구성 요소에 대한 루프가 완료된 후 어떻게 문 또는 메소드를 호출할 수 있는가?

다음과 같은 내 vue 구성 요소:

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

루프가 완료되면 문이나 메소드를 호출하고 싶다.

그래서 루프가 완료되면 문이 실행된다.

어떻게 하면 좋을까?

업데이트:

키라산 답변에서 이렇게 한다.

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

콘솔 로그가 표시되지 않음

내 물건은 물건이다.

항목에서 console.log(n)를 수행하면 다음과 같은 결과가 나타난다.

이 예를 보십시오.

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>

당신은 그것을 성취할 수 있다.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')          
    }
}

이렇게 루프 안에 있는 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");
}
}

테스트는 안 했는데 아이디데아도 좋고 잘 될 거야.질문에 답하기를 희망한다:)

참조URL: https://stackoverflow.com/questions/45205795/how-can-i-call-a-statement-or-method-after-the-loop-complete-on-vue-component