Pagination in Vuetify with "Next" and "Back" button-CodePudding

I am trying to understand how pagination in Vuetify works. I found that with this simple component I can get basic pagination.

<v-pagination
  v-model="page"
  :length="4"
  circle
/>

And it looks like this:

Instead of this, I just want two buttons; Next and Back

For now, I only want to know how to change the view. I do not have any event handlers.

CodePudding user response：

If you want to have 2 basics buttons and the visual on your question, you can achieve it with a simple button component and some CSS like this (using Vue3)

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  Page count: {{ count }}
  <br/>
  <button @click="count--" >minus</button>
  <button @click="count  " style="margin-left: 0.5rem; background-color: blue;" >plus</button>
</template>

<style scoped>
  .button {
    color: white;
    background-color: gray;
    border-radius: 0.25rem;
    padding: 0.25rem;
    font-weight: 700;
    border: none;
  }
</style>

Here is the result.

CodePudding user response：

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-row>
          <v-col>
            <v-card flat>
              <v-card-text>
                <v-btn
                  color="teal"
                  icon
                  small
                  @click="page > 0 ? page-- : null"
                >
                  <v-icon>mdi-chevron-right</v-icon>
                </v-btn>
                <v-btn color="teal" icon small @click="page  ">
                  <v-icon>mdi-chevron-right</v-icon>
                </v-btn>
              </v-card-text>
              <v-card-text>
                {{ page }}
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      page: 0,
      dialog: false,
    };
  },
};
</script>