to avoid performance drop we hook only into the bind function which is called only once,
also to make sure the directive doesnt add any extra load we check by index & at the end we send the last item value.
npm install vue-list-rendered --save
-
register the directive
window.Vue = require('vue') require('vue-list-rendered') new Vue({ el: '#app', })
-
add
v-list-rendered="[index, list, callback]"
to yourv-for
element- to debug the results add
:debug
argument ex.v-list-rendered:debug="..."
then check your console.
<template> <ul> <li v-for="(blog, index) in blogList" :key="blog" v-list-rendered="[index, blogList, doSomething]"> ... </li> </ul> </template> <script> export default { data() { return { blogList: [...] } }, methods: { doSomething(lastItem) { console.log(lastItem) } } } </script>
- to debug the results add
If you discover any security-related issues, please email ctf0-dev@protonmail.com.