【发布时间】：2021-11-20 03:36:10
【问题描述】：
在我的工作中，这个概念看起来在数组中有很多数据，但第一个我只想在数组中显示 4 个对象（id 1 到 id 4）。所以，接下来我按下下一个按钮，我想循环数组中的下一个对象（id 5 到 id 8），然后我按下后退按钮，它们返回到我传递给它们的上一个对象。我不知道这其中的逻辑。
<template>
<v-container fluid>
<v-row no-gutters>
<v-col cols="12" md="12" sm="12">
<v-card>
<v-row no-gutters>
<v-col cols="12" md="12" sm="12" class="">
<v-row no-gutters class="d-flex">
<v-col
cols="6"
md="6"
v-for="(item, index) in content"
:key="`item-${index}`"
>
<v-col cols="6">
<v-card-text>
<p>{{ item.id }}</p>
<p>my name is : {{ item.title }}</p>
</v-card-text></v-col
>
</v-col>
</v-row>
</v-col>
</v-row>
<v-col cols="12" md="12" sm="12" class="d-flex">
<v-col cols="6" md="6" sm="6">
<v-btn medium elevation="" color="primary" @click="backpage()"
>Back</v-btn
>
</v-col>
<v-col cols="6" md="6" sm="6">
<v-btn medium elevation="" color="primary" @click="nextPage()"
>Next</v-btn
>
</v-col>
</v-col>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data: () => ({
showCounted: 4,
content: '',
nextValue: Number,
user: [
{
id: 1,
title: 'Saysana',
},
{
id: 2,
title: 'Binh',
},
{
id: 3,
title: 'Say',
},
{
id: 4,
title: 'Q',
},
{
id: 5,
title: 'a',
},
{
id: 6,
title: 'b',
},
{
id: 7,
title: 'c',
},
{
id: 8,
title: 'e',
},
{
id: 9,
title: 'e',
},
{
id: 10,
title: 'e',
},
{
id: 11,
title: 'e',
},
{
id: 12,
title: 'e',
},
],
}),
computed: {
defaultPage() {
return (this.content = this.user.slice(0, this.showCounted))
},
},
methods: {
async nextPage() {
this.content = this.user.slice(this.showCounted, this.showCounted + 4)
console.log(this.content)
this.showCounted = this.showCounted + 4
},
defaultData() {
this.content = this.user.slice(0, this.showCounted)
},
async backpage() {
const previous = -this.showCounted - 4
let to = 4
this.content = this.user.slice(previous, to)
},
},
mounted() {
this.defaultData()
},
}
</script>
【问题讨论】：
-
这里有几个问题。循环时不应使用
v-for的index。computed不应该有副作用，实际上在mounted中进行相同的更改。然后，您的逻辑有点奇怪，请尝试使用2分进行分页。第一个是 0 或x，x是页面times the amount of elements you want to display。那么，终点应该是y，即x + the amount of elements you want to display。另外，请使用 ESlint 仔细检查任何可能的问题。
标签： javascript vue.js nuxt.js vuetify.js