[英]Vue JS - Rendering Multiple Instances of Components
Development Environment:开发环境:
First, I am using Vue 1.0 and Vueify 7.0.0 using the latest node.首先,我使用最新节点的 Vue 1.0 和 Vueify 7.0.0。 js, npm and browserify to compile the code on an Ubuntu machine with a local Apache Server.
js、npm 和 browserify 在具有本地 Apache 服务器的 Ubuntu 机器上编译代码。
The Problem:问题:
I have created a custom component for <form-input/>
which renders without an error.我为
<form-input/>
创建了一个自定义组件,它呈现时没有错误。 However, when trying to place them next to each other only one will render:然而,当试图将它们并排放置时,只有一个会呈现:
<form>
<form-input />
<form-input />
<form-input />
</form>
In order to get multiple components to render I have to wrap each one in it's own <div>
.为了让多个组件呈现,我必须将每个组件包装在它自己的
<div>
中。
<form>
<div><form-input /></div>
<div><form-input /></div>
<div><form-input /></div>
</form>
For reference the <form-input />
template looks like this:作为参考,
<form-input />
模板如下所示:
<template>
<div class="input-group">
<label"></label>
<input name="" class="form-control" type="text">
</div>
</template>
Not that it's a terribly bad problem, but it's so much easier to read without the extra <div>
tags.并不是说这是一个非常糟糕的问题,但如果没有额外的
<div>
标签,它会更容易阅读。
Question:题:
Is this expected behavior because each component needs its own dom element to bind to or am I missing something?这是预期的行为,因为每个组件都需要绑定到自己的 dom 元素,还是我遗漏了什么?
FYI:供参考:
I have also tried wrapping the template with an extra div tag, but that didn't help.我也试过用额外的 div 标签包装模板,但这没有帮助。 I also do not get any compile or runtime errors either way it writes the template.
我也没有得到任何编译或运行时错误它编写模板的方式。
Thanks in advance.提前致谢。
I am not sure if this could be causing the issue, but self-closing tags are not recommended by the creator of Vue.js: https://github.com/vuejs/vue/issues/1036 .我不确定这是否会导致问题,但 Vue.js 的创建者不推荐自关闭标签: https ://github.com/vuejs/vue/issues/1036。 Do you still have an issue if you change the inputs to
<form-input></form-input>
?如果将输入更改为
<form-input></form-input>
是否仍然有问题?
I don't know how this advise will work with Vue 1.0, but with Vue 2.0 this works fine:我不知道这个建议如何与 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.