Vue JS-渲染组件的多个实例 [英] Vue JS - Rendering Multiple Instances of Components
问题描述
开发环境:
首先,我使用最新节点的Vue 1.0和Vueify 7.0.0。 js,npm和browserify来在具有本地Apache服务器的Ubuntu计算机上编译代码。
First, I am using Vue 1.0 and Vueify 7.0.0 using the latest node. js, npm and browserify to compile the code on an Ubuntu machine with a local Apache Server.
问题:
我为< form-input />
创建了一个自定义组件,该组件呈现时没有错误。但是,当尝试将它们彼此相邻放置时,只会呈现以下内容:
I have created a custom component for <form-input/>
which renders without an error. However, when trying to place them next to each other only one will render:
<form>
<form-input />
<form-input />
<form-input />
</form>
为了获得多个要渲染的组件,我必须将每个组件包装在自己的<$ c $中c>< div> 。
In order to get multiple components to render I have to wrap each one in it's own <div>
.
<form>
<div><form-input /></div>
<div><form-input /></div>
<div><form-input /></div>
</form>
< form-input /> $ c供参考$ c>模板如下:
<template>
<div class="input-group">
<label"></label>
<input name="" class="form-control" type="text">
</div>
</template>
这不是一个非常糟糕的问题,但是要容易得多无需额外的< div>
标签即可阅读。
Not that it's a terribly bad problem, but it's so much easier to read without the extra <div>
tags.
问题:
这是预期的行为,是因为每个组件都需要自己的dom元素绑定到还是我错过了某些东西?
Is this expected behavior because each component needs its own dom element to bind to or am I missing something?
仅供参考:
我也尝试用额外的div标签包装模板,但这无济于事,我也没有得到任何编译
I have also tried wrapping the template with an extra div tag, but that didn't help. I also do not get any compile or runtime errors either way it writes the template.
预先感谢。
推荐答案
我不确定这是否可能导致此问题,但是Vue.js的创建者不建议使用自动关闭标签: https://github.com/vuejs / vue / issues / 1036 。如果将输入更改为< form-input>< / form-input>
,您还有问题吗?
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. Do you still have an issue if you change the inputs to <form-input></form-input>
?
这篇关于Vue JS-渲染组件的多个实例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!