title: How to display a Vue/Nuxt array with a maximum of 10 items and a button to pull in more items?
body: <p>I'm creating a page that lists 10 items of data from an array using javascript/vue/nuxt, which consists of an javascript array with props. The page is a list of websites with some information. At the moment, the page displays the data fine, but i'm wondering is there a way to display a maximum of 10 items per page and pull all the data from a single file instead of directly writing it onto the page?</p>
  <p>I'd like the page to display 10 items from the array and when someone clicks a button, it shows the next 10 items and so forth. I'd also need a second button that allows you to go back to the previous 10 lists. What's the best way to go about this?</p>
  <p>Website List Page:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div class=&quot;websites-container&quot;&gt;
        &lt;website
          logo=&quot;/images/logos/example.jpg&quot;
          link=&quot;hwww.example.com&quot;
          name=&quot;Website Name&quot;
          description=&quot;This is one website&quot;
        /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>The array 'website' code:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;box-container&quot;&gt;
      &lt;div class=&quot;flex-container&quot;&gt;
        &lt;div class=&quot;logo&quot;&gt;
          &lt;img :src=&quot;logo&quot; :href=&quot;link&quot; target=&quot;_blank&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;flex-container&quot;&gt;
        &lt;h3 v-text=&quot;name&quot; /&gt;
        &lt;a v-show=&quot;info&quot; class=&quot;info&quot; :href=&quot;infolink&quot; v-text=&quot;info&quot; /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;p v-show=&quot;description&quot; class=&quot;description&quot; v-text=&quot;description&quot; /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: {
      logo: {
        type: String,
        required: true
      },
      link: {
        type: String,
        required: true
      },
      name: {
        type: String,
        required: true
      },
      info: {
        type: String,
        default: ''
      },
      infolink: {
        type: String,
        default: ''
      },
      description: {
        type: String,
        default: ''
      }
    }
  }
  &lt;/script&gt;
  </code></pre>