vue 2 props undefined

Home / vue.js / vue 2 props undefined

Question:
Please help! I have ‘undefined’ props in child template.

Main js:// some code before
window.Vue = require(‘vue’);
import EventBus from ‘../components/event-bus’;
// some code after

Vue.component(‘calendar-select’, require(‘../components/admin/calendar_select.vue’));

const app = new Vue({
el: ‘#app’,
data: function() {
return {
isActiveCalendar: true
}
},
methods: {
toggleCalendar() {
this.isActiveCalendar = !this.isActiveCalendar;
}
},
mounted() {
EventBus.$on(‘toggleCalendar’, this.toggleCalendar);
}
});

After this I created template like this:

When I do console.log on this.isActiveCalendar, the variable is undefined and in Vue plugin for Chrome is same thing.

Please, tell me, what mistake I am doing!

Thanks!


Answer:
As stated in the documentation for passing props.

HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents:
In this example you would need to use

so that it would pass the value of the variable into the prop.
Read more

Leave a Reply

Your email address will not be published. Required fields are marked *