如何使用vuetify数据迭代器收集行中的对象？

Question

我尝试在我的Vue应用程序中添加Data iterator。当我创建一个CodePen示例时，它可以正常工作，但是当我在我的页面上使用它时，我将所有的项收集在列中，而不是像example中那样并排。有人知道我做错了什么吗？

<template>
<div>
  <v-container fluid grid-list-md>
    <v-data-iterator :items="uploadItems" :pagination.sync="pagination" :rows-per-page-items="[4, 8, 12]" :loading="loading" content-tag="v-layout" row wrap>
      <v-flex slot="item" slot-scope="props" lg2>
        <v-card>
          <v-card-title>
            <h5>{{ props.item.filename }}</h5>
          </v-card-title>
          <v-divider></v-divider>
          <v-list dense>
            <v-list-tile>
              <v-list-tile-content>Status:</v-list-tile-content>
              <v-list-tile-content class="align-end">{{ props.item.status }}</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <h4 style="color: red;">{{ props.item.logs.IMPORTER.VERSION.MSG }}</h4>
            </v-list-tile>
            <v-list-tile>
              <h4>VALIDATOR</h4>
            </v-list-tile>
            <v-list-tile v-for="(value, key) in props.item.logs.VALIDATOR">
              <v-list-tile-content>{{ key }}:</v-list-tile-content>
              <v-list-tile-content class="align-end">{{ value }}</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <h4>LOGS</h4>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>Chnaged:</v-list-tile-content>
              <v-list-tile-content class="align-end">{{ props.item.logs.IMPORTER.CHANGED }}</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>Conflicts:</v-list-tile-content>
              <v-list-tile-content class="align-end">{{ props.item.logs.IMPORTER.CONFLICTS }}</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>Correct version:</v-list-tile-content>
              <v-list-tile-content class="align-end">{{ props.item.logs.IMPORTER.VERSION.CORRECT_VERSION }}</v-list-tile-content>
            </v-list-tile>
          </v-list>
        </v-card>
      </v-flex>
    </v-data-iterator>
  </v-container>
</div>
</template>

我认为它可能是旧版本的Vue或Vuetify，但我有与CodePen上相同的(Vue.js v2.5.17和Vuetify v1.3.11)。我甚至尝试创建一个新的Vue项目并将示例复制到App.vue，但是元素仍然在列中，而不在行中。

Answer 1

希望它能帮上忙，我也有同样的问题。

import Vuetify, { VLayout } from 'vuetify/lib'

Vue.use(Vuetify, {   //...   components: { VLayout } })

Answer 2

在您的代码中，v-data-iterator被设置为row，但在上面的代码中，它被设置为column。

问题代码：

<v-data-iterator :items="items" :rows-per-page-items="rowsPerPageItems" :pagination.sync="pagination" content-tag="v-layout" hide-actions column wrap>

Codepen代码：

<v-data-iterator :items="items" :rows-per-page-items="rowsPerPageItems" :pagination.sync="pagination" content-tag="v-layout" hide-actions row wrap>

Answer 3

我不知道为什么这是必要的，但我通过添加d-inline-flex类设法绕过了这个问题，如下所示：

    <v-data-iterator
      :items="products"
      content-tag="v-layout"
      content-class="d-inline-flex"