0
<template>

  <v-toolbar color="lime accent-1" height="60px">
    <v-toolbar-side-icon>
      <v-icon>android</v-icon>
    </v-toolbar-side-icon>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat>Signup</v-btn>
      <v-btn flat>Login</v-btn>
    </v-toolbar-items>
  </v-toolbar>

  <form>
    <v-text-field
      v-model="name"
      :error-messages="nameErrors"
      :counter="10"
      label="Name"
      required
      @input="$v.name.$touch()"
      @blur="$v.name.$touch()"
    ></v-text-field>
    <v-text-field
      v-model="email"
      :error-messages="emailErrors"
      label="E-mail"
      required
      @input="$v.email.$touch()"
      @blur="$v.email.$touch()"
    ></v-text-field>
    <v-select
      v-model="select"
      :items="items"
      :error-messages="selectErrors"
      label="Item"
      required
      @change="$v.select.$touch()"
      @blur="$v.select.$touch()"
    ></v-select>
    <v-checkbox
      v-model="checkbox"
      :error-messages="checkboxErrors"
      label="Do you agree?"
      required
      @change="$v.checkbox.$touch()"
      @blur="$v.checkbox.$touch()"
    ></v-checkbox>
    <v-btn @click="submit">submit</v-btn>
    <v-btn @click="clear">clear</v-btn>
  </form>

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

Не очень понял что он хочет, вроде всё отделил, <v-toolbar>...</v-toolbar> и <form>...</form>

5
  • 1
    Он говорит, что template должен содержать только один элемент. А у вас их два. 25 янв 2019 в 4:14
  • Получается я в одном компоненте не могу сделать и Navbar (сверху бар навигации) и в этом же компоненте footer (снизу бар)? 25 янв 2019 в 4:18
  • Это само по себе странно. Один компонент и для хедера и для футера. А вообще, просто оберните <v-toolbar>...</v-toolbar> и <form>...</form> в один элемент, например div. 25 янв 2019 в 4:32
  • @StepanKasyanenko спасибо помогло! А если допустим у меня Navbar на главной странице и там же по середине какой-нибудь элемент допустим (form) для авторизации, то лучше это сделать два Vue компонента или сделать в одном под названием MainPage допустим. 25 янв 2019 в 4:47
  • 1
    Лучше сделать 4 компонента, как минимум. 1 - хедер. 2 - футер 3 - форма авторизации, 4 - MainPage, который будет объединять в себе 3 предыдущих. 25 янв 2019 в 5:24

1 ответ 1

4

Ошибка говорит, что <template> должен содержать только один элемент. А у вас их два - <v-toolbar>...</v-toolbar> и <form>...</form>.

Для решения оберните <v-toolbar>...</v-toolbar> и <form>...</form> в один элемент, например <div>.

<template>
 <div>
   <v-toolbar color="lime accent-1" height="60px">
     ...
   </v-toolbar>

   <form>
     ....
   </form>
 </div>
</template>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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