VueJS - 我无法在达到所选限制数据之前或之后隐藏阅读更多按钮以在 vuejs 中显示

Posted 2023-02-16

【中文标题】VueJS - 我无法在达到所选限制数据之前或之后隐藏阅读更多按钮以在 vuejs 中显示

【英文标题】：VueJS - i can't hide readmore button before or after reach the selected limit data to show in vuejs

【发布时间】：2022-01-07 18:39:41

【问题描述】：

我正在使用 vuejs2。尝试在达到值之前或之后隐藏按钮，但我无法获取数据长度以与限制进行比较。我尝试将它重新分配到一个数组中，但仍然无法正常工作，因为长度为 1。知道该怎么做或不同的方法吗？谢谢

export default 
  name: 'SlideEvents',
  props: 
    dataEvents: 
      type: Array,
      default () 
        return []
      
    
  ,
  data () 
    return 
      limit: 6
    
  ,
  components: 
    CardSlide
  ,
  computed: 
    dataFilter () 
      if (this.dataEvents) 
        return this.dataEvents.slice(0, this.limit)
       else 
        return this.dataEvents
      
    
  

<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 @click="limit*=2">Show More</button>
          </div>
        </div>
      </div>
    </div>
  </div>

【问题讨论】：

这可能与您设置属性dataEvents的方式有关。列表中没有要显示的项目吗？

数据显示在列表中，问题是如果该数据小于限制，我无法隐藏按钮。所以我不想将数据长度与 v-if 按钮中的限制进行比较。我将数据克隆到数组，但我只是得到长度为1。原始数据返回是这样的one：value，two：value，three：value ....我已经尝试了所有方式，最后现在用这种方式解决：我直接将数据克隆到 dataFilter 中的数组中： const data = [...this.dataNews] n 也直接在同一个计算中对数据进行排序。然后我可以得到长度并可以与按钮的限制进行比较。谢谢。 :)

【参考方案1】：

要隐藏您的按钮，请使用 v-if 指令。

<button v-if="dataFilter && dataFilter.length < dataEvents.length" @click="limit*=2">Show More</button>

这只会在有事件的情况下显示按钮，并且过滤的事件少于总数。

您也可以使用v-show 指令。