"Line by line" (gradual) output of response.data, how to implement?

Question

JavaScript

Good afternoon again.

Tell me how you can implement a gradual output of records from the database line by line, for example, there is a "load more" button, and a limiter of 10 records, that is, if we receive 30 records when querying the database, then 10 are displayed and a button appears to load more, and only by clicking on it will load the next 10, and so on.
I did it with the help of several arrays, but is it possible to do it with the help of one?

data: {
dataGet: []
},
methods: {
    getData() {
      axios
          .get('API сервера')
          .then(response => this.dataGet = response.data)
          .catch(error => {
            console.log(error)
          })
},
mounted () {
getData()
}

Answer 1

You can try to display it like this: Well, put it in data Well, when you click on the button:
{{ dataGet.slice(0, offset) }}

<Knopka v-if="offset < dataGet.length" @click="showMore" />

And another method:

showMore(){
this.offset += 10
}

Something like this.
___________
And if it is loaded from the server side, then pass a parameter, for example get('https://lala.ru/?offset=' + this.offset)
On the server, shift and display new 10 records on the front, replacing the past ones.
________
And if you need to supplement the current entries, and not replace the old ones, then:

.then(response => this.dataGet = [...this.dataGet, ...response.data])

Answer 2

Add a limiter to data, make a computed property on the first <limiter> records. if there are more records than in the limiter, then show the button. By pressing the button, increase the limiter.