2

Всем привет. Копипастил некоторые элементы с вьютифая(карусель и футер). Карусель вызывает непонятную ошибку. Как видно из кода - v-if не используется вообще. А футер не отображается на странице. Карусель тупой копипаст, никаких v-if`ов в коде нет.

ERROR in ./pages/index.vue?vue&type=template&id=2a183b29& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=template&id=2a183b29&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

  4  |          <h1 style="text-align: left"> Techcall</h1>
  5  |      </div>
  6  |  </div>
     |         
  7  |  <v-carousel cycle height="400" hide-delimiter-background show-arrows-on-hover>
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  8  |      <v-carousel-item v-for="(slide, i) in slides" :key="i">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  9  |          <v-sheet :color="colors[i]" height="100%">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  10 |              <v-row class="fill-height" align="center" justify="center">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  11 |                  <div class="display-3">{{ slide }} Slide</div>
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  12 |              </v-row>
     |  ^^^^^^^^^^^^^^^^^^^^
  13 |          </v-sheet>
     |  ^^^^^^^^^^^^^^^^^^
  14 |      </v-carousel-item>
     |  ^^^^^^^^^^^^^^^^^^^^^^
  15 |  </v-carousel>
     |  ^^^^^^^^^^^^^



<v-carousel cycle height="400" hide-delimiter-background show-arrows-on-hover>
        <v-carousel-item v-for="(slide, i) in slides" :key="i">
            <v-sheet :color="colors[i]" height="100%">
                <v-row class="fill-height" align="center" justify="center">
                    <div class="display-3">{{ slide }} Slide</div>
                </v-row>
            </v-sheet>
        </v-carousel-item>
    </v-carousel>

С футером тоже ничего космического нет, сделал его компонентом как навбар и прописал в лаяуте.

<script>
import Navbar from '~/components/Navbar'
    import Cart from '~/components/Cart'
    import Footer from '~/components/Footer'

    export default {
        components: {
            Navbar,
            Cart,
            Footer
        },
</script>

Спасибо что дочитал до конца, сатана какая-то получается.

1 ответ 1

0

Из приведенной вами ошибки:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

можно сделать вывод, что вы пытаетесь вставить в компонент два корневых элемента, а согласно руководству - Единственный корневой элемент, корневой элемент должен быть один (для vue 2.*)

т.е. следите за тем, чтобы у вас в каждом компоненте было вместо, например такой конструкции:

<template>
  <h3>{{ title }}</h3>
  <v-carousel></v-carousel>
 </template>

вот такая например (обратите внимание на то, что содержимое обернуто тегами div, чтобы обеспечить один корневой элемент в template):

<template>
  <div>
    <h3>{{ title }}</h3>
    <v-carousel></v-carousel>
  </div>
 </template>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.