VueJS inside Laravel, can't pass data using props

Question

This is the code (very simple)

<div class="container" id="vueApp">
  <div class="content">
    <div class="title animated flipInX">BIG TITLE</div>
    <p><strong>Some subtitle</strong></p>
    <custom-button fa-icon="fa-home"></custom-button>
    <custom-button fa-icon="fa-envelope"></custom-button>
    <custom-button fa-icon="fa-info"></custom-button>
  </div>
</div>

<template id="btn-template">
    <span class="btn fa @{{ fa-icon ? fa-icon : 'fa-star-o' }} font-size-40"></span>
</template>

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.14/vue.min.js"></script>

<script>
  Vue.component('custom-button', {
      template: '#btn-template',
      props: ['fa-icon'],
  });
</script>

This is returnig fa-star-o and not the desired fa-icon. I really don't see any errors but I'm new to this so I'm hoping its something trivial.

I'm following this tutorial.

----SOLUTION----

<div class="container" id="vueApp">
  <div class="content">
    <div class="title animated flipInX">BIG TITLE</div>
    <p><strong>Some subtitle</strong></p>
    <custom-button fa-icon="fa-home"></custom-button>
    <custom-button fa-icon="fa-envelope"></custom-button>
    <custom-button fa-icon="fa-info"></custom-button>
  </div>
</div>

<template id="btn-template">
    <span class="btn fa @{{ faIcon }} font-size-40"></span>
</template>

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.14/vue.min.js"></script>

<script>
  Vue.component('custom-button', {
      template: '#btn-template',

      props: {
          faIcon: {
              type: String,
              default: 'fa-star-o'
          }
      }
  });
</script>

pespantelis · Accepted Answer · 2016-01-12 22:52:34Z

2

The prop name should be faIcon (camelCased).

http://vuejs.org/guide/components.html#camelCase_vs-_kebab-case

https://jsfiddle.net/asccyLus/

Also, it is better to use a default value for the faIcon instead of the inline if like this:

  props: {
    faIcon: {
      type: String,
      default: 'fa-star-o'
    }
  },

https://jsfiddle.net/asccyLus/1/

edited Jan 12, 2016 at 22:52

answered Jan 12, 2016 at 22:39

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dbr Over a year ago

I changed fa-icon to faIcon everywhere (6 occurrences), stil not working.

dbr Over a year ago

I just read your link, its working now. I'll edit the question to include the right syntax.

Collectives™ on Stack Overflow

VueJS inside Laravel, can't pass data using props

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related