带有分页的 Vuetify 卡片

Posted 2023-02-22

【中文标题】带有分页的 Vuetify 卡片

【英文标题】：Vuetify card with pagination

【发布时间】：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-
      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']
    
  ,
)

我该怎么办？

【参考方案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>