Vue JS - 渲染组件的多个实例

Question

开发环境：

首先，我使用最新节点的 Vue 1.0 和 Vueify 7.0.0。 js、npm 和 browserify 在具有本地 Apache 服务器的 Ubuntu 机器上编译代码。

问题：

我为<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>标签，它会更容易阅读。

题：

这是预期的行为，因为每个组件都需要绑定到自己的 dom 元素，还是我遗漏了什么？

供参考：

我也试过用额外的 div 标签包装模板，但这没有帮助。 我也没有得到任何编译或运行时错误它编写模板的方式。

提前致谢。

Answer 1

我不确定这是否会导致问题，但 Vue.js 的创建者不推荐自关闭标签： https ://github.com/vuejs/vue/issues/1036。 如果将输入更改为<form-input></form-input>是否仍然有问题？

Answer 2

我不知道这个建议如何与 Vue 1.0 一起使用，但在 Vue 2.0 上效果很好：

<form>
   <form-input key="form-input-1" />
   <form-input key="form-input-2" />
   <form-input key="form-input-3" />
</form>