title: vue.js - Dynamically render items on scroll when visible
body: <p>I have list of 100+ items and rendering takes too much time. I want to show just the once that are visible, and rest on scroll.</p>
  
  <p>What's the best approach?</p>
  
  <p>I have this snippet below, but the vue.set() isn't working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var dbItems = [{name: 'New item'}, {name:'Another'}, {name:'Third'}];
  
  var app = new Vue({
    el: '#app',
    data: {
      // if I put items : dbItems, then for some reason the Vue.set() doesn't work!!
     items : [],
    },
    methods: {
      init: function () {
        this.items = dbItems; // we add all items
      },
      makeItemVisible : function(id) {
        console.log("Making visible #"+id);
        this.items[id].show = 1;
        Vue.set(this.items, id, this.items[id]);
      }
     }
  });
  
  app.init();
  app.makeItemVisible(1); // this works
  
  $(document).on('scroll', function(){
    // function to show elements when visible
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="app" v-cloak&gt;
  
  &lt;button v-on:click="makeItemVisible(0)"&gt;MAKE VISIBLE - This button doesn't work&lt;/button&gt;
  
    &lt;div class="items" v-show="items.length"&gt;
      &lt;!-- I dont know why, but (key, item) had to be switched compared to VUE documentation! --&gt;
     &lt;div v-for="(key, item) in items"&gt;
           &lt;div v-if="item.show" style="border:2px solid green;height:700px"&gt;
              You can see me: {{ item.name }} | ID: {{ key }}
          &lt;/div&gt;
          &lt;div class="item-blank" data-id="{{ key }}" v-else style="border:2px solid red;height:700px"&gt;
           {{ item.name }}  invisible {{ key }}
          &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>