Показать больше товаров + 10 товаров при клике

Question

Как реализовать функционал кнопки - Show More (показать + 10 следующих товаров)

<button v-for="item in pagelinksArr" @click="sendRequest(item.label)">{{ item.label }}</button>
    <div v-for="product in products" class="box">
        <p>Id:  {{product.id}}</p>
        <p>Userd: {{product.userid}}</p>
        <p>City: {{product.city}}</p>
    </div>
    <button>Show More</button>

data() {
        return {
            pagelinksArr: [],
            products: [],
            checkCity: [],
            checkuserid: [],
                    }
            },
            created() {
        this.sendRequest();
    },
    methods: {
        async sendRequest(i = 1) {
            let params = new URLSearchParams({
                                    "page": i
            })
            var URL = "https://burburbus.com.ua/api/temp?" + params.toString()
                            const res = await fetch(URL)
                            const products = await res.json()
                            console.log(products.data);
            this.pagelinksArr = products.data.links
                            this.products = products.data.data
                    }
            }

Answer 1

Дополнение к моему комменту, это лишь пример Вешаете этот метод на событие клика кнопки и всё

Можно завести в data отдельный счётчик для страниц, и инкрементировать его, чтобы не передавать аргумент, а просто вызвать метод, как уж вам удобнее

methods: {
  async getMoreProducts(pageIndex) {
    const URL = "https://burburbus.com.ua/api/temp?page=" + pageIndex
    const res = await fetch(URL)
    const products = await res.json()
    
    this.products.push(products.data.data)
  }
}

БЛОГ НА HUSL

Показать больше товаров + 10 товаров при клике

Ответы (1 шт):