How to limit the Topic List to 5 (Items) after clicked to Show more (Button) show only 3 (Items)

Question

How to limit the Topic List to 5 (Items) after clicked to Show more (Button)only.

Also 3 (Items) and so on to the end of the list after that it shows you the Show less (Button).

For example: In the Udemy filter option when you click in See More button it shows only 5 items .

This is my whole code :

TEMPLATE CODE

<template>
      <div class="modal fade" id="FilterPanelModal" tabindex="-1" role="dialog" aria-labelledby="FilterPanelModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
          <div class="modal-content">
          <div class="modal-body pb-0">
              <form>
                  <div class="row mb-xl-0 mb-lg-0 mb-3">

                  <fieldset v-bind:name="FilterByTopic.FilterByTopic_Name" 
                            class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12">
                      <legend class="filter-title"> 
                          <i class="fas fa-folder mr-1"></i> {{ FilterByTopic.FilterByTopic_Title }}
                      </legend>
                      <div v-for="(Topic, Index) in FilterByTopic.FilterByTopicOptions" 
                           v-bind:key="Topic.id"
                           class="filter-option-cnt">
                      <div v-if="Index < FilterByTopic_limit_by" 
                           class="filter-option">
                      <div class="custom-control custom-checkbox">
                      <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 />
                      <label class="custom-control-label" :for="Topic.Topic_UID">
                          {{ Topic.Topic_Name }} <small class="text-muted">{{ Topic.Topic_Count }}</small>
                      </label>
                      </div><!-- End custom-control -->
                      </div><!-- End filter-option -->
                      </div><!-- End filter-option-cnt -->
                      <button v-on:click="FilterByTopic_MoreAndLess(FilterByTopic_default_limit, FilterByTopic.FilterByTopicOptions.length)" 
                              type="button"
                              class="btn btn-link pl-0">
                              <span v-if="FilterByTopic_limit_by === 5">
                                  <i class="fas fa-plus mr-1"></i>
                              </span>
                              <span v-else>
                                  <i class="fas fa-minus mr-1"></i>
                              </span>
                              {{ FilterByTopic_limit_by === 5 ? "See More" : "See Less" }}
                      </button>
                  </fieldset><!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 -->

                  <fieldset v-bind:name="FilterBySubCategory.FilterBySubCategory_Name" 
                            class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12">
                      <legend class="filter-title">
                          <i class="fas fa-tags mr-1"></i> {{ FilterBySubCategory.FilterBySubCategory_Title }}
                      </legend>
                      <div class="filter-option-cnt">

                      </div><!-- End filter-option-cnt -->
                  </fieldset><!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 -->

                  <fieldset v-bind:name="FilterByLevel.FilterByLevel_Name" 
                            class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12">
                      <legend class="filter-title"><i class="fas fa-level-up-alt mr-1"></i> {{ FilterByLevel.FilterByLevel_Title }}</legend>

                  </fieldset><!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 -->

                  <fieldset v-bind:name="FilterByLanguage.FilterByLanguage_Name" 
                            class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12">
                      <legend class="filter-title"><i class="fas fa-language mr-1"></i> {{ FilterByLanguage.FilterByLanguage_Title }}</legend>
                  </fieldset><!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 -->

                  </div><!-- End row -->

                  <div class="row">

                  <fieldset class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12">
                      <legend class="filter-title"><i class="far fa-money-bill-alt mr-1"></i> Price</legend>
                  </fieldset><!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 -->
                  <fieldset class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12">
                      <legend class="filter-title"><i class="far fa-lightbulb mr-1"></i> Features</legend>
                  </fieldset><!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 -->
                  <fieldset class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12">
                      <legend class="filter-title"><i class="fas fa-star mr-1"></i> Ratings</legend>
                  </fieldset><!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 -->
                  <fieldset class="filter-content col-xl-3 col-lg-6 col-md-12 col-sm-12">
                      <legend class="filter-title"><i class="far fa-calendar-alt mr-1"></i> Duration</legend>
                  </fieldset><!-- End col-xl-3 col-lg-6 col-md-12 col-sm-12 -->

                  </div><!-- End row -->
              </form>
          </div><!-- End modal-body -->
          </div><!-- End modal-content -->
          </div><!-- End modal-dialog -->
      </div><!-- End FilterPanelModal -->
    </template>

SCRIPT CODE

<script>
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 & 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;
        }
    }
}
</script>

Answer 1

The function FilterByTopic_MoreAndLess is wrong, what you want to do here is increase the number of topics you display until you are showing all of the topics, then return to initial state.

FilterByTopic_MoreAndLess (limit, total) {
          if(this.FilterByTopic_limit_by >= total)
            this.FilterByTopic_limit_by = limit;
          else
            this.FilterByTopic_limit_by += limit;
        }

Now just change the condition for the button label.

{{ FilterByTopic_limit_by === FilterByTopic.FilterByTopicOptions.length ? "See More" : "See Less" }}