Gostaria de saber como posso passar um objeto javascript como propriedade de um componente vuejs.
Estou tetando da seguinte forma, mas não está funcionando:
componente:
Vue.component('web-nav', {
props: ['navProps'],
data: function() {
return {
Props: this.navProps,
}
},
template: '<header class="head-section"> <div class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"><img height="90px" width="90px" v-bind:src="Props.logo" alt=""></a> </div><div class="navbar-collapse collapse"> <ul ref="ulNavPrincipal" class="nav navbar-nav"> <li v-for="props in Props.buttons" v-bind:class="props.class" > <template v-if="props.class===\'dropdown\'"> <a class="dropdown-toggle" data-close-others="false" data-delay="0" d ata-hover="dropdown" data-toggle="dropdown" href="#">{{props.caption}}<i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li v-for="propsDown in props.dropdownBtns" > <a v-bind:href="propsDown.linkDrop">{{propsDown.captionDrop}}</a> </li></ul> </template> <template v-else> <a v-bind:href="props.link">{{props.caption}}</a> </template> </li></ul> </div></div></div></header>'
});
html:
<web-nav
:navProps="[{
logo: 'assets/img/logo_flat.png',
buttons: {
Home: {
class: 'none',
link: 'index.html',
caption: 'Home',
},
second: {
class: 'dropdown',
link: '#',
caption: 'Second',
dropdownBtns: {
Second Second: {
linkDrop : '#',
captionDrop: 'Second Second'
},
},
}
},
}]"
>
</web-nav>