title: I want to limit the maximum display length 5 items for each list (VueJS)
body: <p>Example : in Udemy filter option when you click in See More button it show only 5 items.</p>
  
  <p>I create the same option using Vue but when i clicked to See more it show me all the list I want to limit this list to 5 items for each click.</p>
  
  <p>This is my whole code :</p>
  
  <pre><code>    &lt;template&gt;
    &lt;div class="modal fade" id="FilterPanelModal" tabindex="-1" role="dialog" aria-labelledby="FilterPanelModalLabel" aria-hidden="true"&gt;
        &lt;div class="modal-dialog modal-lg modal-dialog-scrollable" role="document"&gt;
        &lt;div class="modal-content"&gt;
        &lt;div class="modal-body pb-0"&gt;
            &lt;form&gt;
                &lt;div class="row mb-xl-0 mb-lg-0 mb-3"&gt;
  
                &lt;fieldset v-bind:name="FilterByTopic.FilterByTopic_Name" 
                          class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12"&gt;
                    &lt;legend class="filter-title"&gt; 
                        &lt;i class="fas fa-folder mr-1"&gt;&lt;/i&gt; {{ FilterByTopic.FilterByTopic_Title }}
                    &lt;/legend&gt;
                    &lt;div v-for="(Topic, Index) in FilterByTopic.FilterByTopicOptions" 
                         v-bind:key="Topic.id"
                         class="filter-option-cnt"&gt;
                    &lt;div v-if="Index &lt; FilterByTopic_limit_by" 
                         class="filter-option"&gt;
                    &lt;div class="custom-control custom-checkbox"&gt;
                    &lt;input type="checkbox" 
                           class="custom-control-input"
                           name="Filter-ByTopic"
                           v-model="FilterByTopic.FilterByT"
                           v-bind:id="Topic.Topic_UID"
                           :value="Topic.Topic_UID"
                           readonly /&gt;
                    &lt;label class="custom-control-label" :for="Topic.Topic_UID"&gt;
                        {{ Topic.Topic_Name }} &lt;small class="text-muted"&gt;{{ Topic.Topic_Count }}&lt;/small&gt;
                    &lt;/label&gt;
                    &lt;/div&gt;&lt;!-- End custom-control --&gt;
                    &lt;/div&gt;&lt;!-- End filter-option --&gt;
                    &lt;/div&gt;&lt;!-- End filter-option-cnt --&gt;
                    &lt;button v-on:click="FilterByTopic_MoreAndLess(FilterByTopic_default_limit, FilterByTopic.FilterByTopicOptions.length)" 
                            type="button"
                            class="btn btn-link pl-0"&gt;
                            &lt;span v-if="FilterByTopic_limit_by === 5"&gt;
                                &lt;i class="fas fa-plus mr-1"&gt;&lt;/i&gt;
                            &lt;/span&gt;
                            &lt;span v-else&gt;
                                &lt;i class="fas fa-minus mr-1"&gt;&lt;/i&gt;
                            &lt;/span&gt;
                            {{ FilterByTopic_limit_by === 5 ? "See More" : "See Less" }}
                    &lt;/button&gt;
                &lt;/fieldset&gt;&lt;!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 --&gt;
  
                &lt;fieldset v-bind:name="FilterBySubCategory.FilterBySubCategory_Name" 
                          class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12"&gt;
                    &lt;legend class="filter-title"&gt;
                        &lt;i class="fas fa-tags mr-1"&gt;&lt;/i&gt; {{ FilterBySubCategory.FilterBySubCategory_Title }}
                    &lt;/legend&gt;
                    &lt;div class="filter-option-cnt"&gt;
  
                    &lt;/div&gt;&lt;!-- End filter-option-cnt --&gt;
                &lt;/fieldset&gt;&lt;!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 --&gt;
  
                &lt;fieldset v-bind:name="FilterByLevel.FilterByLevel_Name" 
                          class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12"&gt;
                    &lt;legend class="filter-title"&gt;&lt;i class="fas fa-level-up-alt mr-1"&gt;&lt;/i&gt; {{ FilterByLevel.FilterByLevel_Title }}&lt;/legend&gt;
  
                &lt;/fieldset&gt;&lt;!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 --&gt;
  
                &lt;fieldset v-bind:name="FilterByLanguage.FilterByLanguage_Name" 
                          class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12"&gt;
                    &lt;legend class="filter-title"&gt;&lt;i class="fas fa-language mr-1"&gt;&lt;/i&gt; {{ FilterByLanguage.FilterByLanguage_Title }}&lt;/legend&gt;
                &lt;/fieldset&gt;&lt;!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 --&gt;
  
                &lt;/div&gt;&lt;!-- End row --&gt;
  
                &lt;div class="row"&gt;
  
                &lt;fieldset class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12"&gt;
                    &lt;legend class="filter-title"&gt;&lt;i class="far fa-money-bill-alt mr-1"&gt;&lt;/i&gt; Price&lt;/legend&gt;
                &lt;/fieldset&gt;&lt;!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 --&gt;
                &lt;fieldset class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12"&gt;
                    &lt;legend class="filter-title"&gt;&lt;i class="far fa-lightbulb mr-1"&gt;&lt;/i&gt; Features&lt;/legend&gt;
                &lt;/fieldset&gt;&lt;!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 --&gt;
                &lt;fieldset class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12"&gt;
                    &lt;legend class="filter-title"&gt;&lt;i class="fas fa-star mr-1"&gt;&lt;/i&gt; Ratings&lt;/legend&gt;
                &lt;/fieldset&gt;&lt;!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 --&gt;
                &lt;fieldset class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12"&gt;
                    &lt;legend class="filter-title"&gt;&lt;i class="far fa-calendar-alt mr-1"&gt;&lt;/i&gt; Duration&lt;/legend&gt;
                &lt;/fieldset&gt;&lt;!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 --&gt;
  
                &lt;/div&gt;&lt;!-- End row --&gt;
            &lt;/form&gt;
        &lt;/div&gt;&lt;!-- End modal-body --&gt;
        &lt;/div&gt;&lt;!-- End modal-content --&gt;
        &lt;/div&gt;&lt;!-- End modal-dialog --&gt;
    &lt;/div&gt;&lt;!-- End FilterPanelModal --&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: 'FilterPanelModal',
      data: function() {
          return {
              // For Filter By Topic
              FilterByTopic_default_limit: 5,
              FilterByTopic_limit_by: 5,
              FilterByTopic: {
                  FilterByTopic_Title: "Topic",
                  FilterByTopic_Name: "Topic",
                  FilterByT: [],
                  FilterByTopicOptions: [
                      { 
                          Topic_id: 0, 
                          Topic_UID: "JXETdWWM",
                          Topic_Name: "Ionic",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 1, 
                          Topic_UID: "g2K8SkFA",
                          Topic_Name: "PHP",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 2, 
                          Topic_UID: "P1Q6HOFN",
                          Topic_Name: "Python",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 3, 
                          Topic_UID: "rMzXsrwO",
                          Topic_Name: "Ruby &amp; Rails",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 4, 
                          Topic_UID: "IaMfmedm",
                          Topic_Name: ".NET / C#",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 5, 
                          Topic_UID: "kAqpieja",
                          Topic_Name: "Java",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 6, 
                          Topic_UID: "rUf0AGyV",
                          Topic_Name: "Perl",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 7, 
                          Topic_UID: "znaJ4diW",
                          Topic_Name: "ColdFusion",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 8, 
                          Topic_UID: "uXmoqYpc",
                          Topic_Name: "JavaScript",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 9, 
                          Topic_UID: "daL54tCv",
                          Topic_Name: "ActionScript",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 10, 
                          Topic_UID: "GiXDC0oe",
                          Topic_Name: "Angular",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 11, 
                          Topic_UID: "AvNhruTX",
                          Topic_Name: "C++",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 12, 
                          Topic_UID: "tUxVxhHH",
                          Topic_Name: "SQL",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 13, 
                          Topic_UID: "kfvzVRsH",
                          Topic_Name: "MySQL",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 14, 
                          Topic_UID: "wSeLABXD",
                          Topic_Name: "MongoDB",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 15, 
                          Topic_UID: "SuqxZbEM",
                          Topic_Name: "Dart",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 16, 
                          Topic_UID: "BwAXbUmp",
                          Topic_Name: "Haskell",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 17, 
                          Topic_UID: "cHSjfDKs",
                          Topic_Name: "Kotlin",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 18, 
                          Topic_UID: "PEpWCdtF",
                          Topic_Name: "Ruby",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 19, 
                          Topic_UID: "RWMKGkCj",
                          Topic_Name: "NodeJS",
                          Topic_Count: "(0)"
                      },
                      { 
                          Topic_id: 20, 
                          Topic_UID: "NqHzgDWS",
                          Topic_Name: "Wordpress",
                          Topic_Count: "(0)"
                      }
                  ]
              }, // End Filter By Topic
  
              // For Filter By SubCategory
              FilterBySubCategory: {
                  FilterBySubCategory_Title: "Subcategory",
                  FilterBySubCategory_Name: "Subcategory",
                  FilterBySubCat: [],
                  FilterBySubCategoryOptions: []
              },
              // End Filter By SubCategory
  
              // For Filter By Level
              FilterByLevel: {
                  FilterByLevel_Title: "Level",
                  FilterByLevel_Name: "Level",
                  FilterByLv: [],
                  FilterByLevelOptions: []
              },
              // End Filter By Level
  
              // For Filter By Language
              FilterByLanguage: {
                  FilterByLanguage_Title: "Language",
                  FilterByLanguage_Name: "Language",
                  FilterByLang: [],
                  FilterByLanguageOptions: []
              }
              // End Filter By Language
  
          }
      },
      computed: {
  
      },
      methods: {
          FilterByTopic_MoreAndLess (FilterByTopic_default_limit, filters_length) {
              this.FilterByTopic_limit_by = (this.FilterByTopic_limit_by === FilterByTopic_default_limit) ? filters_length : FilterByTopic_default_limit;
          }
      }
  }
  &lt;/script&gt;
  </code></pre>