Skip to main content
3 de 3
correções ortográficas
David
  • 4,3mil
  • 5
  • 32
  • 67

Vuejs passar objeto como props

Gostaria de saber como posso passar um objeto javascript como propriedade de um componente .

Estou tentando 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>