CODEWITHSUNDEEP
vue.jsvuejs2
miltone
miltone

Reputation: 4756

basic structure components issue with Vue.js

I try to create a basic structure of components in a Instance Vue.js for training with this framework.

I work with local declaration of components and I want to use 4 components (1 navbar + 3 cards bootstrap)

All run perfectly if I don't add a navbar component. But if I add the componentStatusBar I have this error message :

"Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead"

I don't understand why this specific component trouble all my system template for my mainContainer Vue instance ?

mainContainer.js code :

var componentStatusBar = Vue.component('component-status-bar', {
    template: `
    <nav class="navbar navbar-light bg-light">
      <a class="navbar-brand" href="#">
        <span class="fas fa-stroopwafel"></span>
        Bootstrap
      </a>
    </nav>
    `
})

var componentA = Vue.component('component-a', {
    template: `
<div class="card text-white bg-dark mb-3" style="max-width: 32rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
    `
})

var componentB = Vue.component('component-b', {
    template: `
    <div class="card bg-light mb-3" style="max-width: 32rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
    `
})

var componentC = Vue.component('component-c', {
    template: `
    <div class="card text-white bg-info mb-3" style="max-width: 32rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
    `
})

var mainContainer = new Vue({
    el: '#main-container',
    components: {
      'component-a': componentA,
      'component-b': componentB,
      'component-c': componentC,
      'component-status-bar': componentStatusBar
    },
    template: `
        <component-status-bar></component-status-bar>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                    <component-a></component-a>
                </div>
                <div class="col-md-4">
                    <component-b></component-b>                    
                </div>
                <div class="col-md-4">
                    <component-c></component-c>                    
                </div>
            </div>
        </div>
    `,
});

Upvotes: 0

Views: 98

Answers (1)

Thomas
Thomas

Reputation: 2536

The error tells you that you need to wrap your mainComponent into a div because vue (and other like angular or react) is not able to handle more than 1 root element per component.

var mainContainer = new Vue({
    el: '#main-container',
    components: {
      'component-a': componentA,
      'component-b': componentB,
      'component-c': componentC,
      'component-status-bar': componentStatusBar
    },
    template: `
       <div>  // new
        <component-status-bar></component-status-bar>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                    <component-a></component-a>
                </div>
                <div class="col-md-4">
                    <component-b></component-b>                    
                </div>
                <div class="col-md-4">
                    <component-c></component-c>                    
                </div>
            </div>
        </div>
      </div> // new
    `,
});

Upvotes: 2

Related Questions