Skip to main content

Vuejs passar objeto como props

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>