Как вывести несколько строк в компоненте vue.js?

Question

[yazux]

Сегодня начал изучение vue.js, столкнулся с проблемой, гугление не дало результатов.
В общем, есть следующий код:

var login = Vue.component('login', {
    template: '#login-form',
    data: function(){
      return {
        name: '',
        password: '',
        labelName: 'Имя',
        labelPassword: 'Пароль',
        labelSubmit: 'Отправить',
      }
    },
    created: function(){ }
  });

  new Vue({ el: '#vue-app', components: {login: login}, });

Данный компонент планирую использовать как форму авторизации.
Вывод шаблона:

<div id="vue-app">
        <login></login>
      </div>

Сам шаблон, для теста, в таком виде работает:

<template id="login-form">
      <div>@{{ labelName }}</div>
</template>

Но стоит добавить к выводу ещё что-то, как все крашится:

<template id="login-form">
      <div>@{{ labelName }}</div>
     <div>@{{ labelPassword }}</div>
</template>

Получаю ошибку: Error 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.

Подскажите, что я делаю не так.

Answer 1

[Антон Антон]

<div>
      <div>@{{ labelName }}</div>
     <div>@{{ labelPassword }}</div>
</div>

exactly one root element

Answer 2

[Ivan Bogachev]

Подскажите, что я делаю не так. Component template should contain exactly one root element.

У вас ошибка довольно простая: в переводе звучит как "шаблон компонента может иметь только один корневой элемент":

<template id="login-form">
<div>
    <div>@{{ labelName }}</div>
    <div>@{{ labelPassword }}</div>
</div>
</template>

Comments

[yazux]

Это я понимаю, я не понимаю как работать с компонентом если мне нужно выводить туда не 1 строку.

[yazux]

Я пробовал в data возвращать 1 объект, а в него уже закидывал все что мне надо, ну и выводить так: {{data.labelName}}, и та же самая ошибка

Answer 3

[yazux]

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

<template id="login-form">
      <div>
          <div>@{{ data.labelName }}</div>
          <div>@{{ data.labelPassword }}</div>
      </div>
</template>

Comments

[Ivan Bogachev]

Это называется "задал вопрос, получил два верных ответа, потом ответил сам и отметил решением только свой ответ". Была бы на тостере карма - заминусовали бы.

[yazux]

Ivan Bogachev: извиняюсь, не обратил внимания на то, что вы включили то, что было у меня в новый div

[Ivan Bogachev]

yazux: ок, бывает