укладывать элементы vuetify на одной странице - PullRequest
Новая
       50

укладывать элементы vuetify на одной странице

0 голосов
/ 11 декабря 2018

С помощью vuetify, как я могу сделать так, чтобы два компонента пользовательского интерфейса отображались на одной странице?Я попытался объединить элементы в одной скобке и получил сообщения об ошибках.При штабелировании компонентов по отдельности в передней части появляется только нижний шаблон.Есть ли способ двух компонентов стека пользовательского интерфейса с использованием vue-router?

edit: моя цель - поместить два компонента пользовательского интерфейса, таких как сетка для фотографий и карусель vuetify, друг на друга, чтобы создать распечатку, похожую на этот скриншот mash-up .

Это код, который генерирует мою текущую распечатку локального хоста пример кода стековых шаблонов и распечатки локального хоста .

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

1 Ответ

0 голосов
/ 12 декабря 2018

Ваша проблема в том, что у вас есть два тега шаблона, если вы перемещаете содержимое нижнего тега шаблона в первый, он должен работать.Это должно выглядеть примерно так: 

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

Как сказал @ sumurai8, у вас должен быть только один тег шаблона верхнего уровня.

...