Question

我在该Codepen内有一支电笔https://codepen.io/handy29/pen/YzPNWpO，拥有vuetify2.x.x。我想使用分页实现v卡，如您所见，我有一个headline数组和subtitle数组。如果单击向右箭头或向左箭头，则v卡内的标题和字幕会发生变化（调整数组的索引），但是如您所见，这是行不通的。我尝试在v卡上使用v-model="page"，并在v-slot:items上使用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']
    }
  },
})

我该怎么办？

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

带分页的Vuetify卡

1 个答案: