Vuejs Get a button to only print once inside a v-for

So basically what i am trying to do is to get a button to only show for the first item within the v-for. I want to be able to add a button and for it to be only printed once no matter how many times the v-for loops round.

Here is the JSFiddle with the code and also code posted below

  <div v-for="item in userInformation">
  <p>{{item.username}}</p>
  <p>{{item.email}}</p>
  <p>{{item.age}}</p>
  <button> Only Show Once</button> //Only show this once
  </div>

Answer

You can use v-once directive to render a view only once in Vuejs, but your v-for needs to have a :key bind to the index of your loop but still didn’t work for me:

Another quick way to do this is, use the key to get the last iteration:

 <div v-for="(item, index) in userInformation" :key='index'>

and place this logic inside your button

 <button v-if='index === userInformation.length -1 '> Only Show Once</button>

This jsfiddle demo will show the button only once and after the last iteration.