Importing Vue (Vue.js) Component Results in No Errors, But Doesn't Display

Question

Pretty basic implementation of Vue here as a test run, and I'm having some issues breaking out data into components. Here is HTML:

<body>
    <header id="main-header">
       <custom-header></custom-header>
    </header>
</body>

I am instantiating a Vue instance and tying it to the #main-header:

import CustomHeader from '../header.vue';

const header = new Vue({
    el: '#main-header',
    data: chx,
    components: {
        'custom-header': CustomHeader
    },
    methods: {
        run: function() {
            console.log('run');
        },
        print: function() {
            window.print()
        },
        save: function() {
            console.log('save');
        }
    }
});

And the imported template:

<template>
    <div class="header-menu">
        <img class="logo" src="images/logo.png">
    </div>
    <div class="header-menu">
        <h1 id="date-range-label"><span v-show="dates.startFormatted">{{dates.startFormatted}} - {{dates.endFormatted}}</span></h1>
        <i v-on:click="settingsVisible = !settingsVisible" id="settings" class="fa fa-2x fa-cog settings-icon no-print"></i>
    </div>
</template>

No errors are logged in the console or by the Webpack process. Not sure where to go from here since nothing is being logged. The <header> div remains empty in the resulting HTML.

You have two <div> elements in the root of your <template> element. You need to wrap both in another <div> or change your overall structure. — jarrodwhitley
– jarrodwhitley, Commented Dec 2, 2019 at 18:36

thanksd · Accepted Answer · 2017-07-12 20:28:25Z

4

Your custom header component has two div elements at the root of its template. A component can only have a single root element.

In your case, it's probably easiest to wrap the content in a div element:

<template>
  <div>
    <div class="header-menu">
      <img class="logo" src="images/logo.png">
    </div>
    <div class="header-menu">
      <h1 id="date-range-label"><span v-show="dates.startFormatted">{{dates.startFormatted}} - {{dates.endFormatted}}</span></h1>
      <i v-on:click="settingsVisible = !settingsVisible" id="settings" class="fa fa-2x fa-cog settings-icon no-print"></i>
    </div>
  </div>
</template>

answered Jul 12, 2017 at 20:28

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tyler Mills Over a year ago

This started throwing errors, which is definitely progress. The error I'm receiving is: "TypeError: Cannot read property 'startFormatted' of undefined" However, this property is contained within the parent Vue data object of chx. What are best practices for making the data contained within the object available to the component itself?

thanksd Over a year ago

If you don't give the child component that data via props it won't have access to it. That's a separate issue, I'd read the docs on components.

Collectives™ on Stack Overflow

Importing Vue (Vue.js) Component Results in No Errors, But Doesn't Display

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related