Vue JS - рендеринг нескольких экземпляров компонентов

Question

среды разработки:

Во-первых, я использую Vue 1.0 и Vueify 7.0.0 с использованием новейших Node.js, НПМ и browserify для компиляции кода на машине Ubuntu с локальный сервер Apache.

Проблема:

Я создал пользовательский компонент для <form-input/>, который делает без ошибок. Однако при попытке разместить их рядом друг с другом только один будет оказывать:

<form> 
     <form-input /> 
     <form-input /> 
     <form-input /> 
</form> 

Для того, чтобы получить несколько компонентов, чтобы сделать я должен обернуть каждый в своем собственном <div>.

<form> 
     <div><form-input /></div> 
     <div><form-input /></div> 
     <div><form-input /></div> 
</form> 

Для справок <form-input /> шаблон выглядит следующим образом:

<template> 
    <div class="input-group"> 
     <label"></label> 
     <input name="" class="form-control" type="text"> 
    </div> 
</template> 

Не то, что это очень плохая проблема, но это гораздо легче читать без дополнительных <div> тегов.

Вопрос:

Это ожидаемое поведение, поскольку каждый компонент нужен свой собственный дом элемент, чтобы связать или я что-то отсутствует?

FYI:

Я также попытался обертывание шаблона с дополнительным сНом тегом, но это не помогло. Я также не получаю никаких компиляций или ошибок во время выполнения, так как они пишут шаблон.

Заранее спасибо.

Answer 1

Я не уверен, что это может вызвать проблему, но создатели Vue.js не поддерживают самозакрывающиеся теги: https://github.com/vuejs/vue/issues/1036. У вас все еще есть проблема, если вы вносите изменения в <form-input></form-input>?