时间戳

首页 > 解决方案 > 带有分页的 Vuetify 卡片

vue.js - 带有分页的 Vuetify 卡片

问题描述

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

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.jsvuetify.js

解决方案

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

推荐阅读