Блог

Главная - Вопросы по программированию - Как я могу заставить это меню разбивки на страницы работать в Vue?

Как я могу заставить это меню разбивки на страницы работать в Vue?

#javascript #ajax #laravel #vue.js

#javascript #ajax #laravel #vue.js

Вопрос:

Я установил laravel-vue-pagination с помощью:

 npm install laravel-vue-pagination

Затем я зарегистрировал его глобально в app.js:

 Vue.component('pagination', require('laravel-vue-pagination'));

Наконец, у меня было меню, и в каждом меню есть категории, а в каждой категории есть продукты. Разбивка на страницы должна отображать 3 продукта на странице. Оно показывало первую страницу, а под ней было количество доступных страниц, но страницы были недоступны для просмотра. Я нажал на страницу 2 или 3, и ничего не происходит.

 <div class="card-body">
    <body>
    <tbody>
        <template v-for="product in catProducts.data" v-if="product.CATUID === category.CATID">
            <tr>
                <td @click="editText(product.ID '-descript')">
                    <span v-if="!show(product.ID '-descript')">{{product.DESCRIPT}}</span>
                    <input v-if="show(product.ID '-descript')" type="text" v-focus="focused" @focus="focused = true" v-model="product.DESCRIPT" @blur="hide(product.RID ,product.ID ,product.DESCRIPT, 'DESCRIPT')" @keyup.prevent.enter="hide(product.RID ,product.ID ,product.DESCRIPT, 'DESCRIPT')"></td>
                <td @click="editText(product.ID '-tag1')">
                    <span v-if="!show(product.ID '-tag1')">{{product.TAG1}}</span>
                    <input v-if="show(product.ID '-tag1')" type="text" v-focus="focused" @focus="focused = true" v-model="product.TAG1" @blur="hide(product.RID ,product.ID ,product.TAG1, 'TAG1')" @keyup.prevent.enter="hide(product.RID ,product.ID ,product.TAG1, 'TAG1')"></td>
                <td @click="editText(product.ID '-tag2')">
                <span v-if="!show(product.ID '-tag2')">{{product.TAG2}}</span>
                <input v-if="show(product.ID '-tag2')" type="text" v-focus="focused" @focus="focused = true" v-model="product.TAG2" @blur="hide(product.RID ,product.ID ,product.TAG2, 'TAG2')" @keyup.prevent.enter="hide(product.RID ,product.ID ,product.TAG2, 'TAG2')"></td>
                <td @click="editText(product.ID '-price')">
                <span v-if="!show(product.ID '-price')">{{product.PRICE}}</span>
                <input v-if="show(product.ID '-price')" type="text" v-focus="focused" @focus="focused = true" v-model="product.PRICE" @blur="hide(product.RID ,product.ID ,product.PRICE, 'PRICE')" @keyup.prevent.enter="hide(product.RID ,product.ID ,product.PRICE, 'PRICE')"></td>
            </tr>
        </template>
    </tbody>
</table>
</div>

И:

 <pagination :data="catProducts" @pagination-change-page="getResults(category.CATID)"></pagination>

Единственное различие между github и моим заключается в добавлении CATID в ajax:

 getResults(catid, page = 1) {
                axios.get('api/getproducts/' this.restid '/' catid '?page='   page)
                    .then(response => {
                        this.products = response.data;
                    });
            },

Есть идеи, как заставить работать меню разбивки на страницы?

Комментарии:

1. div -> body -> tbody не похоже ни на какую правильную иерархию HTML

Ответ №1:

Помимо странной иерархии HTML, вы не захватываете выбранную страницу из pagination-change-page события

Попробуйте использовать следующее (обратите внимание на использование $event )

 <pagination
  :data="catProducts"
  @pagination-change-page="getResults(category.CATID, $event)"
></pagination>

Вы также можете немного очистить свой getResults метод

 async getResults (catid, page = 1) {
  const url = `api/getproducts/${encodeURIComponent(this.restid}/${encodeURIComponent(catid)}`
  const { data } = await axios.get(url, { params: { page } })
  this.products = data;
},