（显示更多）/（显示更少）按钮 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