Vue.js 我想将每个列表（VueJS）的最大显示长度限制为5个项目

示例：在“我的过滤器”选项中，当您单击“查看更多”按钮时，它仅显示5项

我使用Vue创建了相同的选项，但当我单击查看更多内容时，它会显示所有列表，我希望每次单击将此列表限制为5个项目

这是我的全部代码：

    <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>
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>

{{FilterByTopic.FilterByTopic_Title}
{{Topic.Topic_Name}{{Topic.Topic_Count}}
{{FilterByTopic_limit_by==5？“查看更多”：“查看更少”}
{{FilterBySubCategory.FilterBySubCategory_Title}
{{FilterByLevel.FilterByLevel_Title}
{{FilterByLanguage.FilterByLanguage_Title}
价格
特征
评级
期间
导出默认值{
名称：“FilterPanelModel”，
数据：函数（）{
返回{
//用于按主题筛选
FilterByTopic\u默认值\u限制：5，
过滤器光电限值：5，
滤镜细胞照片：{
FilterByTopic_标题：“主题”，
FilterByTopic_名称：“主题”，
过滤器Byt:[]，
FilterByToPic选项：[
{ 
主题id:0，
主题UID：“JXETdWWM”，
主题名称：“爱奥尼亚”，
主题_计数：“（0）”
},
{ 
主题id：1，
主题：“g2K8SkFA”，
主题名称：“PHP”，
主题_计数：“（0）”
},
{ 
主题编号：2，
主题：“P1Q6HOFN”，
主题名称：“Python”，
主题_计数：“（0）”
},
{ 
主题编号：3，
主题(UID):"rMzXsrwO",，
主题名称：“Ruby和Rails”，
主题_计数：“（0）”
},
{ 
主题编号：4，
主题：“IaMfmedm”，
主题名称：“.NET/C”，
主题_计数：“（0）”
},
{ 
主题编号：5，
主题：“卡皮耶亚”，
主题名称：“Java”，
主题_计数：“（0）”
},
{ 
主题编号：6，
主题：“rUf0AGyV”，
主题名称：“Perl”，
主题_计数：“（0）”
},
{ 
主题编号：7，
主题：“znaJ4diW”，
主题名称：“ColdFusion”，
主题_计数：“（0）”
},
{ 
主题编号：8，
主题：“uXmoqYpc”，
主题名称：“JavaScript”，
主题_计数：“（0）”
},
{ 
主题编号：9，
主题：“daL54tCv”，
主题名称：“ActionScript”，
主题_计数：“（0）”
},
{ 
主题编号：10，
主题：“GiXDC0oe”，
主题名称：“角度”，
主题_计数：“（0）”
},
{ 
主题编号：11，
主题：“AvNhruTX”，
主题名称：“C++”，
主题_计数：“（0）”
},
{ 
主题编号：12，
主题UID：“tUxVxhHH”，
主题名称：“SQL”，
主题_计数：“（0）”
},
{ 
主题编号：13，
主题：“kfvzVRsH”，
主题名称：“MySQL”，
主题_计数：“（0）”
},
{ 
主题编号：14，
主题UID：“wSeLABXD”，
主题名称：“MongoDB”，
主题_计数：“（0）”
},
{ 
主题编号：15，
主题：“SuqxZbEM”，
主题名称：“飞镖”，
主题_计数：“（0）”
},
{ 
主题编号：16，
主题：“BwAXbUmp”，
主题名称：“Haskell”，
主题_计数：“（0）”
},
{ 
主题编号：17，
主题:
<div v-for="(Topic, Index) in FilterByTopic.FilterByTopicOptions.slice(0, (numberOfClick + 1) * 5)" 
                       v-bind:key="Topic.id"
                       class="filter-option-cnt">

data: function() {
        return {
            numberOfClick: 0,
...

methods: {
    FilterByTopic_MoreAndLess (FilterByTopic_default_limit, filters_length) {
        this.FilterByTopic_limit_by = (this.FilterByTopic_limit_by === FilterByTopic_default_limit) ? filters_length : FilterByTopic_default_limit;

        this.numberOfClick ++;
    }
}