vue custom slider, next and prev button

Question

I have a custom slider, and I only want to show the next and prev button if there are actually any slides that matches and index in the array...

So if im on the last slide, it should only be the "prev" button that is shown, and if it's the first slide, only the "next button" is shown...

Im currently a bit stuck on how to do this.. I've had a look at array.findIndex(), but no luck..

The html:

<transition-group name='fade' tag='div'  mode="in-out">
      <div class="slide" v-for="(case_item, index) in cases" :key="case_item.id" v-show="current_slide_number === index" :class="{'is-active-slide': current_slide_number === index}">
        <div class="case-slider__info">
          <h2>{{case_item.role}} {{index}}</h2>
          <h3>{{case_item.title}}</h3>
          <app-button title="Se projekt" button-type="primary" :show-icon="false" display="block"></app-button>
        </div>
        <div class="case-slider__image">
          <img src="http://via.placeholder.com/600x350" />
        </div>
      </div>
    </transition-group>
    <div class="case-slider__navigation">
      <div class="next" @click="nextSlide">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 47.255 47.255" style="enable-background:new 0 0 47.255 47.255;" xml:space="preserve" width="512px" height="512px">
        <g>
          <path d="M12.314,47.255c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l21.92-21.92l-21.92-21.92   c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0L35.648,22.92c0.391,0.391,0.391,1.023,0,1.414L13.021,46.962   C12.825,47.157,12.57,47.255,12.314,47.255z" fill="#FFFFFF"/>
        </g>
      </svg>
      </div>
      <div class="prev" @click="prevSlide">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 47.255 47.255" style="enable-background:new 0 0 47.255 47.255;" xml:space="preserve" width="512px" height="512px">
        <g>
          <path d="M34.941,47.255c-0.256,0-0.512-0.098-0.707-0.293L11.607,24.334c-0.391-0.391-0.391-1.023,0-1.414L34.234,0.293   c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-21.92,21.92l21.92,21.92c0.391,0.391,0.391,1.023,0,1.414   C35.453,47.157,35.197,47.255,34.941,47.255z" fill="#FFFFFF"/>
        </g>
      </svg>
      </div>
    </div>

The array im looping over:

cases: [
      {
        id: 1,
        title: "test1",
        link: "http://tv2.dk",
        role: 'A role of some sort'
      },
      {
        id: 2,
        title: "test2",
        link: "http://tv2",
        role: 'A role of some sort'
      },
      {
        id: 3,
        title: "test3",
        link: "http://tv2",
        role: 'A role of some sort'
      },
      {
        id: 4,
        title: "test4",
        link: "http://tv2",
        role: 'A role of some sort'
      }
    ]

And my nexy/prev functions

nextSlide(event) {
    event.preventDefault();
    this.current_slide_number += 1;
  },
  prevSlide(event) {
    event.preventDefault();
    this.current_slide_number -= 1;
  }

I hope someone can point me in the right direction...? :)

Answer 1

You need to add check of v-if="cases.length-1!=current_slide_number" on next button so that it gets hidden on last case.
For previous button checking for slide_number=0 will do v-if="current_slide_number!=0"

Below is the snippet

 function callMe() { var vm = new Vue({ el: '#root', data: { current_slide_number: 0, cases: [{ id: 1, title: "test1", link: "http://tv2.dk", role: 'A role of some sort' }, { id: 2, title: "test2", link: "http://tv2", role: 'A role of some sort' }, { id: 3, title: "test3", link: "http://tv2", role: 'A role of some sort' }, { id: 4, title: "test4", link: "http://tv2", role: 'A role of some sort' } ] }, methods: { nextSlide(){ this.current_slide_number++; }, prevSlide(){ this.current_slide_number--; } } }) } callMe(); 

 .case-slider__navigation{ width:40% } .prev{ float:left } .next{ float:right } h5{margin:0px} 

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script> <div id='root'> <div class="slide" v-for="(case_item, index) in cases" :key="case_item.id" v-show="current_slide_number === index" :class="{'is-active-slide': current_slide_number === index}"> <div class="case-slider__info"> <h5>{{case_item.role}} {{index}}</h5> <h5>{{case_item.title}}</h5> </div> <div class="case-slider__image"> <img src="http://via.placeholder.com/200x100" /> </div> </div> <div class="case-slider__navigation"> <div class="next" v-if="cases.length-1!=current_slide_number"> <button @click="nextSlide">next</button> </div> <div class="prev" v-if="current_slide_number!=0"> <button @click="prevSlide">previous</button> </div> </div> </div>