Vue List Rendered

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>