Vue directive - for문 끝난 후 callback 처리 관련 테스트

Vue directive - for문 끝난 후 callback 처리 관련 테스트

1. main.js 에 아래 Vue directive 추가

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

 

 

2. 적용할 template for문에 directive 적용

사용 시 main.js 추가한 directive 명 v-for-callback 추가하여 key, array, callback 추가

callback 함수를 methods에 추가하면 for문이 끝난 후 해당함수가 실행됨

 

<template>
    <div>
        <ul class="custom-card-list type01">
          <li
            v-for="(data, idx) in searchData"
            :key="idx"
            v-for-callback="{ key: idx, array: searchData, callback: callback }"
          >
            중략...
          </li>
        </ul>
    </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {};
  },
  mounted() {},
  methods: {
    callback() {
    	// for문 끝난 후 callback 함수 실행
    },
  },
};
</script>