Как сделать v-for цикл DIV и показать их по частям (Vue.js)

Question

У меня есть следующий код:

<div class="container-fluid" id="networdapp" style="display:none;">
    <div class="row" >
        <div v-for="(result,i) in results" :key="i" class="col-sm-6" >
            <div class="card m-3 h-240  bg-light" >
                <div class="card-header text-center" > {{ result.title }} </div>
                <div class="card-body" style="height:200px" >
                    <p class="card-text" v-html="result.prevDesc" ></p>
                </div>
                <div class="card-footer bg-transparent border-info">
                    <a href="/details" class="btn btn-info" @click="getData(i)" >Details</a>
                </div>
            </div>
        </div>
    </div>
</div>

И я хочу проанализировать эти col-sm-6 деления, сгенерированные циклом v-for (Vue.js). Цель состоит в том, чтобы сделать их видимыми 5 на 5.Первыйвсе они должны быть невидимыми -> обработчик событий -> 5 видимых -> обработчик событий -> 10 видимых и так далее ... И я думаю, что мне нужно их проанализировать. {{result.title}} и result.prevDesc отлично работают, нетбеспокоится об этом.

Answer 1

Вы можете сохранить свой массив results и создать еще один массив с именем shownResults, который изначально не содержит никаких результатов, но когда вы нажмете кнопку showMore, вы получите 5 результатов, помещенных в этот массив и показанных, если вынажмите еще раз, чтобы отобразить 10 результатов и т. д.,

new Vue({
  el: '#app',
  data() {
    return {
    bound:0,
       results:[
       {
       title:"title1",
       prevDesc:"desc1"
       },
        {
       title:"title2",
       prevDesc:"desc2"
       },
         {
       title:"title3",
       prevDesc:"desc3"
       },
         {
       title:"title4",
       prevDesc:"desc4"
       },
         {
       title:"title5",
       prevDesc:"desc5"
       },
         {
       title:"title7",
       prevDesc:"desc7"
       },
         {
       title:"title8",
       prevDesc:"desc8"
       }
       ],
       shownResults:[]
       } 
  },
  methods:{
  showMore(){
  this.bound+=5;
     this.shownResults=this.results.slice(0,this.bound);
  },
    getData(i){
    
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
<div id="app">
<div class="container-fluid" id="networdapp" >
 <div class="row" >
    <div v-for="(result,i) in shownResults" :key="i" class="col-sm-6" >
      <div class="card m-3 h-240  bg-light" >
         <div class="card-header text-center" > {{ result.title }} </div>
           <div class="card-body" style="height:200px" >
             <p class="card-text" v-html="result.prevDesc" ></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="/details" class="btn btn-info" @click="getData(i)" >Details</a>
             </div>
         </div>
    </div>
    <a class="btn btn-info" style="height:40px" @click="showMore" >Show more</a>
    
  </div>
</div>
</div>