1

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>
2

1 Resposta 1

1

As propriedades passadas a componentes Vue.js devem ser declaradas como atributos válidos em HTML, por isso têm de ser kebab-case, ou seja: nav-props em vêz de navProps.

Exemplo da documentação:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .