div内部的嵌套和先前分页

Question

所以，我创建了一个有分页的Laravel控制器。我的Vue文件中的代码如下

<div class="flex justify-between flex-wrap">
    <div v-for="kink in kinks.data" :key="kink.id" :value="kink.name">
        <button type="button" class="m-1 my-2 inline-flex items-center px-3.5 py-2 border border-transparent text-sm leading-4 font-medium rounded-full shadow-sm text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"> {{ kink.name }}</button>
    </div>
</div>
<div class="flex justify-between">
    <ArrowLeftIcon type="button" :href="kinks.next_page_url" class="m-2 inline-flex items-center px-2 py-1 h-7 rounded-full border border-transparent text-sm leading-4 font-medium shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 "></ArrowLeftIcon>
    <ArrowRightIcon type="button" :href="kinks.last_page_url" class="m-2 inline-flex items-center px-2 py-1 h-7 rounded-full border border-transparent text-sm leading-4 font-medium shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"></ArrowRightIcon>
</div>

箭头按钮应根据活动页更改v-for数据。我从来没有这样做过，我不想使用一些廉价的npm包，当我只是需要下一个和以前。

理想情况下，如果有人在第1页上，并单击“前一页”，则该页应转到最后一页，而与最后一页相同的是“下一步”应转至第1页。

你是如何实现这一点的？

从分页到vue中的数据对象提供了以下内容：

kinks:Object
current_page:1
data:Array[13]
first_page_url:"http://localhost:8000/kinks?page=1"
from:1
last_page:5
last_page_url:"http://localhost:8000/kinks?page=5"
links:Array[7]
next_page_url:"http://localhost:8000/kinks?page=2"
path:"http://localhost:8000/kinks"
per_page:13
prev_page_url:null
to:13
total:63

Answer 1

好的，那么你会想要改变你的按钮的工作方式。例如，向它们添加一个@click方法，而不是href

示例

<button @click="previousLink">
    ...icon
</button>

<script>
export default {
    methods: {
        previousLink() {
            if (this.prev_page_url === null) {
                window.location.href = this.last_page_url;
            } else {
                window.location.href = this.prev_page_url;
            }

        }
 
    }

}
</script>