在一页中堆叠 vuetify 元素

Question

使用 vuetify，如何让两个 UI 组件显示在一个页面上？我尝试在一个括号内组合元素并收到错误消息。当单独堆叠组件时，只有底部模板出现在前端。有没有办法使用 vue-router 来堆叠 UI 组件？

编辑：我的目标是将两个 ui 组件（例如来自 vuetify 的照片网格和旋转木马）放在彼此之上，以创建类似于此屏幕截图的打印输出 mash-up。

这是生成我当前本地主机打印输出的代码 code sample of stacking templates and the localhost printout。

 <template>
 <v-layout>
<v-flex xs12 sm6 offset-sm3>
  <v-card>
    <v-container grid-list-sm fluid>
      <v-layout row wrap>
        <v-flex
          v-for="n in 9"
          :key="n"
          xs4
          d-flex
        >
          <v-card flat tile class="d-flex">
            <v-img
              :src="`https://picsum.photos/500/300?image=${n * 5 + 10}`"
              :lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
              aspect-ratio="1"
              class="grey lighten-2"
            >
              <v-layout
                slot="placeholder"
                fill-height
                align-center
                justify-center
                ma-0
              >
                <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
              </v-layout>
            </v-img>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-card>
  </v-flex>
</v-layout>

<v-carousel>
  <v-carousel-item
    v-for="(item,i) in items"
    :key="i"
    :src="item.src"
  ></v-carousel-item>
</v-carousel>
</template>

Answer 1

您的问题是您有两个模板标签，如果您将底部模板标签的内容移到第一个模板标签中，它应该可以工作。它应该看起来像这样：

<template>
    <div>
        <v-layout>
            v-card etc...
        </v-layout>
        <v-carousel>
            v-carousel-item etc...
        </v-carousel>
    </div>
</template>
<script>
    javscript code...
</script>

正如@sumurai8 所说，您应该只有一个顶级模板标签。

在一页中堆叠 vuetify 元素

stack vuetify elements in one page

javascript

frontend

vue.js

vue-router

vuetify.js