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 的创建者不推荐 self-closing 标签：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>

Vue JS - Rendering Multiple Instances of Components