如何使这个分页菜单在 Vue 中工作？答案

【问题标题】：How can I make this pagination menu work in Vue?如何使这个分页菜单在 Vue 中工作？
【发布时间】：2020-12-30 04:38:05
【问题描述】：

我通过以下方式安装 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 和我的唯一区别是在 ajax 中添加了 CATID：

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

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

【问题讨论】：

div -> body -> tbody 看起来不像任何正确的 HTML 层次结构

标签： javascript ajax laravel vue.js

【解决方案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;
},

【讨论】：