проблема в кнопке (Показать больше) / (Показать меньше) VueJS

Question

Привет, ребята, я работаю над опцией фильтра с помощью VueJS / Laravel У меня есть некоторые проблемы с кнопкой (Показать больше) / (Показать меньше), проблема заключается в следующем: Проба 1: Сначала нормально, когда вы ограничиваете список элементов, в которых отображается кнопка «Показать больше», но в моем случае кнопка «Показать меньше». Проба 2: можете ли вы сказать, чист ли этот код опции?

<template>
          <form>
              <div class="row">
              <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 === FilterByTopic.FilterByTopicOptions.length ? "See More" : "See Less" }}
                  </button>
              </fieldset>
              </div><!-- End row -->
          </form>
</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)"
                    }
                ]
            } 

        }
    }
    methods: {
        FilterByTopic_MoreAndLess (limit, total) {
            if (this.FilterByTopic_limit_by >= total) {
                this.FilterByTopic_limit_by = limit;
            } else {
                this.FilterByTopic_limit_by += limit;
            }
        }
    }
}
</script>

Answer 1

Мне кажется, что ваш FilterByTopic_limit_by начинается со значения 5, а ваш FilterByTopicOptions.length начинается со значения 21 из-за того, как он инициализируется в data, поэтому происходит сбой FilterByTopic_limit_by === FilterByTopic.FilterByTopicOptions.length сравнение.

РЕДАКТИРОВАТЬ: попробуйте изменить тест с FilterByTopic_limit_by === FilterByTopic.FilterByTopicOptions.length на FilterByTopic.FilterByTopicOptions.length > FilterByTopic_limit_by