时间戳

首页 > 解决方案 > 如何使这个分页菜单在 Vue 中工作？

javascript - 如何使这个分页菜单在 Vue 中工作？

问题描述

我通过以下方式安装了 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;
                    });
            },

知道如何使分页菜单起作用吗？

标签： javascriptajaxlaravelvue.js

解决方案

除了奇怪的 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;
},

推荐阅读