Vuejs pass object as props

Navigation
1

I would like to know how to pass a javascript object as a property of a component vue.js .

I'm trying this way, but it's not working:

component: 

 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>
    
asked by anonymous 23.06.2017 / 21:32

1 answer

1

Properties passed to Vue.js components should be declared as valid attributes in HTML, so they must be kebab-case, ie nav-props instead of navProps .

Documentation example: 

Vue.component('child', {
  // camelCase no JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case no HTML -->
<child my-message="hello!"></child>
    
23.06.2017 / 21:42
Datatables bringing all data at once How to pass data from the database to combobox?