带有分页的 Vuetify 卡片答案

【问题标题】：Vuetify card with pagination带有分页的 Vuetify 卡片
【发布时间】：2020-04-10 14:28:22
【问题描述】：

我有一个代码笔 https://codepen.io/handy29/pen/YzPNWpO 在这个代码笔里面我有 vuetify 2.x.x。我想使用分页实现 v-card，如您所见，我有一个 headline 数组和 subtitle 数组。如果您单击右箭头或左箭头，则 v-card 内的标题和副标题会更改（调整数组的索引），但您现在可以看到这不起作用。我尝试在 v-card 上使用 v-model="page" 并在 v-list-item-title 上使用 v-slot:items，但这仍然不起作用。

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

我该怎么办？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

不明白为什么需要v-slot: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>

【讨论】：