Question

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

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

这是产生我当前的本地主机打印输出code sample of stacking templates和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元素堆叠在一页中

1 个答案: