Vue2中如何根据数据总量与展示限制的对比动态隐藏查看更多按钮

1. 先排查数据长度始终为1的问题 #

长度恒为1的问题90%是父组件传递dataEvents时数据结构异常，大概率是把实际的列表数据嵌套在了一层数组里，比如传值格式为[[{id:1},{id:2}...]]，外层数组长度自然为1。
你可以先在当前组件的created钩子加一行打印确认结构：

created() {
  console.log('传入的dataEvents实际结构：', this.dataEvents, '长度：', this.dataEvents.length)
}

如果确认是嵌套了一层数组，两种解决方式：

• 优先修改父组件的传值逻辑，直接返回内层的列表数组即可
• 如果无法修改父组件，就在当前组件取值时先取内层数组，如果项目不支持可选链可替换为传统逻辑判断：

realEvents() {
  return Array.isArray(this.dataEvents?.[0]) ? this.dataEvents[0] : this.dataEvents
}

2. 实现「查看更多」按钮自动隐藏 #

新增一个计算属性判断按钮是否需要展示即可，逻辑是当总数据长度大于当前展示限制时才显示按钮：

computed: {
  // ... 保留之前的realEvents、dataFilter计算属性
  showLoadMore() {
    return this.realEvents.length > this.limit
  }
}

然后给按钮加v-if判断：

<button v-if="showLoadMore" @click="limit *= 2">Show More</button>

修改后的完整代码参考 #

JS部分 #

export default {
  name: 'SlideEvents',
  props: {
    dataEvents: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      limit: 6
    }
  },
  components: {
    CardSlide
  },
  computed: {
    realEvents() {
      // 兼容嵌套数组的异常传值情况
      return Array.isArray(this.dataEvents?.[0]) ? this.dataEvents[0] : this.dataEvents
    },
    dataFilter () {
      return this.realEvents.slice(0, this.limit)
    },
    showLoadMore() {
      return this.realEvents.length > this.limit
    }
  }
}

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div class="container-fluid more-top">
    <div class="row">
      <div class="col-md-12">
        <div class="card box-simple border-0">
          <h2>Agenda Terbaru</h2>
          <div class="mt-5 mb-5">
            <div class="row row-cols-1 row-cols-md-3 g-5 mt-2 px-4">
            
              <CardSlide class="mb-4" v-for="each in dataFilter"
              :key="each.id"
              :content="each" />
            </div>
            <button v-if="showLoadMore" @click="limit*=2">Show More</button>
          </div>
        </div>
      </div>
    </div>
  </div>

内容的提问来源于stack exchange，提问作者Rhiri