Vue.js 带分页的Vuetify卡

我有一个代码笔在这个代码笔里面我有vuetify 2.x.x。我想使用分页实现v-card，正如您所看到的，我有一个标题数组和副标题数组。若你们点击右箭头或左箭头，v-card内的标题和副标题会改变调整数组的索引，但正如你们现在看到的，这是不起作用的。我试着在v-card上使用v-model=page，并在v-list-item-title上使用v-slot:items，但仍然不起作用

HTML:

---

我该怎么办？

不明白为什么需要v型槽：items=props。 但是您的问题可以通过更改以下绑定来解决

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

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']
    }
  },
})

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