在 vuejs 中使用 2 个按钮（下一个和上一个按钮）处理限制数据

Question

在我的工作中，这个概念看起来在数组中有很多数据，但第一个我只想在数组中显示 4 个对象（id 1 到 id 4）。所以，接下来我按下一个按钮，我想循环数组中的下一个对象（id 5 到 id 8），然后我按下后退按钮 return 到我传递给他们的上一个对象。我不知道这其中的逻辑。

<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>

Answer 1

像下面的片段一样尝试：添加数据属性currentPage: 1，然后在next/back页increment/decrement当前页和slice(this.showCounted * this.currentPage, this.showCounted * this.currentPage + this.showCounted)/slice(this.showCounted * this.currentPage - this.showCounted, this.showCounted * this.currentPage)。如果您在 last/first 页面上，也可以使用 disable/enable 按钮。通过这种方式，您可以选择要显示的任意数量的项目，只需将 showCounted 设置为所需的值即可。

Vue.config.productionTip = false
Vue.config.devtools = false
new Vue({
  el: '#demo',
  vuetify: new Vuetify(),
  data(){
    return {
      showCounted: 4,
      currentPage: 1,
      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'},
      ],
      isDisabledN: false,
      isDisabledB: false
    }
  },
  methods: {
    defaultData() {
      this.content = this.user.slice(0, this.showCounted)
    },
    nextPage() {
      this.content = this.user.slice(this.showCounted * this.currentPage, this.showCounted * this.currentPage + this.showCounted)
      this.currentPage++
      this.checkPage()
    },
    backpage() {
      this.currentPage--
      this.content = this.user.slice(this.showCounted * this.currentPage - this.showCounted, this.showCounted * this.currentPage)
      this.checkPage()
    },
    checkPage() {
      if (this.showCounted  * this.currentPage >= this.user.length) {
        this.isDisabledN = true
        this.isDisabledB = false
      } else if(this.currentPage <= 1) {
        this.isDisabledN = false
        this.isDisabledB = true
      } else {
        this.isDisabledN = false
        this.isDisabledB = false
      }
    }
  },
  mounted() {
    this.defaultData()
    this.checkPage()
  },
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="demo">
  <v-app>
    <v-main>
      <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 :disabled="isDisabledB" ref="back" medium elevation="" color="primary" @click="backpage()"
                    >Back</v-btn
                  >
                </v-col>
                <v-col cols="6" md="6" sm="6">
                  <v-btn :disabled="isDisabledN" ref="next" medium elevation="" color="secondary" @click="nextPage()"
                    >Next</v-btn
                  >
                </v-col>
              </v-col>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
   </v-main>
 </v-app>
</div>

在 vuejs 中使用 2 个按钮（下一个和上一个按钮）处理限制数据

Handle limit data with 2 buttons (Next and previous button ) in vuejs

javascript

vue.js

vuejs2

nuxt.js

vuetify.js