vue.js - vue 2 props undefined -
please help! have 'undefined' props in child template.
main js:
// code before window.vue = require('vue'); import eventbus '../components/event-bus'; // 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 created template this:
<template> <div class="custom-select" v-bind:class="{ active: isactivecalendar}" > <div class="box flex" v-on:click="togglecalendar" > <span>calendar</span> <img src="/assets/img/admin/arrow-down.png" alt="#"> </div> </div> </div> </template> <script> import eventbus '../event-bus'; export default { // ------- start props: ['isactivecalendar'], data: function() { return { } }, methods: { togglecalendar: function(event) { console.log(this.isactivecalendar) eventbus.$emit('togglecalendar'); } } // ------- end } </script>
when console.log on this.isactivecalendar, variable undefined , in vue plugin chrome same thing.
please, tell me, mistake doing!
thanks!
as stated in documentation passing props.
html attributes case-insensitive, when using non-string templates, camelcased prop names need use kebab-case (hyphen-delimited) equivalents:
in example need use
<calendar-select v-bind:is-active-calendar="isactivecalendar"></calendar-select>
so pass value of variable prop.
Comments
Post a Comment