Skip to content

ctf0/vue-list-rendered

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue List Rendered
npm npm

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.

Installation

npm install vue-list-rendered --save

Usage

  • register the directive

    window.Vue = require('vue')
    require('vue-list-rendered')
    
    new Vue({
        el: '#app',
    })
  • add v-list-rendered="[index, list, callback]" to your v-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>

Security

If you discover any security-related issues, please email ctf0-dev@protonmail.com.

About

a custom directive to check if last item in list was rendered

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published