Search code examples
javascriptnode.jsbrowserifyvue.js

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. js, npm and browserify to compile the code on an Ubuntu machine with a local Apache Server.

The Problem:

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>

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>

For reference the <form-input /> template looks like this:

<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.

Question:

Is this expected behavior because each component needs its own dom element to bind to or am I missing something?

FYI:

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.

Thanks in advance.

Solution

  • 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>?