将vuetify元素堆叠在一页中

Matt 发表于 Dev

马特

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

编辑：我的目标是把两个UI组件，如照片网格和旋转木马从vuetify在上面互相创建打印出类似这样的截图混搭。

这是生成我当前的堆叠模板和localhost打印输出的localhost打印输出代码示例的代码。

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

阿姆利特·卡隆

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。