title: Show More Less With Vuejs
body: <p>I want to accomplish a task where, I have 12 items aligned as 4 items per column, initially the first four items are visible others are hidden until we click the button "show more " one row of four cols appears , and then again pressing the button the other 4 items are visible . Then we have less button on click of which the second and third row is hidden and only the first is visible. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const vm = new Vue({
    el: '#app',
  
    data() {
      return {
        limitationList: 5,
        products: {
          {
            name: "a",
            category: "a",
            price: "82.75"
          },
          {
            name: "a",
            category: "2",
            price: "82.75"
          },
          {
            name: "a",
            category: "3",
            price: "82.75"
          },
          {
            name: "a",
            category: "4",
            price: "82.75"
          },
          {
            name: "a",
            category: "5",
            price: "82.75"
          },
          {
            name: "a",
            category: "6",
            price: "82.75"
          },
          {
            name: "a",
            category: "7",
            price: "82.75"
          },
          {
            name: "a",
            category: "8",
            price: "82.75"
          },
          {
            name: "a",
            category: "9",
            price: "82.75"
          },
          {
            name: "a",
            category: "10",
            price: "82.75"
          },
          {
            name: "a",
            category: "11",
            price: "82.75"
          },
          {
            name: "a",
            category: "12",
            price: "82.75"
          },
        }
      }
    },
  
    methods: {
      updateLimitation(limitationList) {
        if (this.limitationList == this.product.length) {
          this.limitationList = 5
        } else {
          this.limitationList = this.product.length
        }
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"&gt;&lt;/script&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="app"&gt;
      &lt;v-app&gt;
        &lt;v-content&gt;
  
          &lt;v-container&gt;
            &lt;v-layout row wrap&gt;
              &lt;v-flex xs12 sm6 md3 lg3 xl3 mb-3 v-for="product in products" :key="product.id" v-if="product &amp;&amp; product.length &gt; 0 &amp;&amp; index &lt;= limitationList"&gt;
                &lt;div class="pa-4"&gt;
                  &lt;div class="pt-3"&gt;
                    &lt;p class="mb-0"&gt;
                      &lt;a href="javascript:void(0)"&gt;{{product.category}}&lt;/a&gt;
                    &lt;/p&gt;
                    &lt;h5&gt;&lt;a href="javascript:void(0)"&gt; {{product.name}}&lt;/a&gt;&lt;/h5&gt;
                    &lt;div fxLayoutAlign="space-between"&gt;
                      &lt;p class="accent-color"&gt;
                        {{product.price}}&lt;/p&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/v-flex&gt;
            &lt;/v-layout&gt;
          &lt;/v-container&gt;
        &lt;/v-content&gt;
      &lt;/v-app&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>