Just dipping my toes into Vue with a simple test implementation and running into some trouble breaking down data into components. Let's take a closer look at the code:
<body>
<header id="main-header">
<custom-header></custom-header>
</header>
</body>
Here's where I create a new Vue instance tied to #main-header:
import CustomHeader from '../header.vue';
const chx = {
dates: { dateFormatted:"2016-01-01"},
title: "Hello World",
settingsVisible: false
}
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');
}
}
});
Let's also take a peek at the template being imported:
<template>
<div>
<div class="header-menu">
<img class="logo" src="images/logo.png">
</div>
<i v-on:click="run" id="run" class="fa fa-3x fa-play-circle run-icon no-print" aria-hidden="true"></i>
<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>
<script>
export default {
props: ['title', 'dates']
}
</script>
The main issue here is that my template is unable to access any of the data within the chx object I've defined, resulting in an error message
"TypeError: Cannot read property 'startFormatted' of undefined"bind, but I'm unsure how to properly integrate it with v-show and v-on.