Vuejs pass object as props

Asked

Viewed 1,254 times

1

I wonder how I can pass a javascript object as a component property .

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>
javascript vue.js

  • Is there a mistake? I think it’s because you don’t have kebab-case :navProps. Forehead :nav-props

  • 1

    that’s right Thank you very much, problem because of https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case&#Xa

1 answer

1


Properties passed to Vue.js components must be declared as valid attributes in HTML, so they must be kebab-case, i.e.: nav-props in time of navProps.

Example of documentation:

Vue.component('child', {
  // camelCase no JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case no HTML -->
<child my-message="hello!"></child>

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.