CODEWITHSUNDEEP
vue.jsvuetify.js
Mohamad Handy Nugraha
Mohamad Handy Nugraha

Reputation: 302

Vuetify card with pagination

I have a code pen https://codepen.io/handy29/pen/YzPNWpO inside this codepen I have vuetify 2.x.x. I want implement v-card using pagination, as you can see I have a headline array and subtitle array. If you click right arrow or left arrow, headline and subtitle inside v-card change (adjust index of array) but as you can see for now this is not working. I tried using v-model="page" on v-card and using v-slot:items on v-list-item-title, but still this is not working.

HTML:

<div id="app">
  <v-app id="inspire">
    <v-card
      :items="headlines"
      v-model="page"
      class="mx-auto"
      max-width="344"
      outlined
    >
      <v-list-item three-line>
        <v-list-item-content>
          <div class="overline mb-4">OVERLINE</div>
          <v-list-item-title class="headline mb-1" v-slot:items="props">{{props}}</v-list-item-title>
          <v-list-item-subtitle>This is subtitle (will be replace using array subtitle)</v-list-item-subtitle>
        </v-list-item-content>

        <v-list-item-avatar
          tile
          size="80"
          color="grey"
        ></v-list-item-avatar>
      </v-list-item>

      <v-card-actions>
        <v-btn text>Button</v-btn>
        <v-btn text>Button</v-btn>
      </v-card-actions>
    </v-card>

    <v-pagination
        v-model="page"
        :length="headlines.length"
      ></v-pagination>
  </v-app>
</div>

JS:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      page: 1,
      headlines: ['headline1', 'headline2', 'headline3', 'headline4', 'headline5'],
      subtitles: ['Greyhound divisely hello coldly fonwderfully', 'Greyhound divisely hello sunny wonderful', 'Flower expected coldly fonwderfully', 'Flower sunny hello', 'Greyhound flower']
    }
  },
})

What should I do?

Upvotes: 0

Views: 2880

Answers (1)

painotpi
painotpi

Reputation: 6996

Don't understand why you need the v-slot:items="props". But your problem could be solved just by changing the following bindings,

<v-list-item-title class="headline mb-1"> {{ headlines[page - 1] }}</v-list-item-title>
<v-list-item-subtitle>{{ subtitles[page - 1] }}</v-list-item-subtitle>

Upvotes: 1

Related Questions