Laravel 中的 VueJS，无法使用 props 传递数据

Question

这是代码（很简单）

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

这是返回 fa-star-o 而不是所需的 fa-icon。我真的没有看到任何错误，但我对此并不陌生，所以我希望它是微不足道的。

我正在关注这个 tutorial。

----解决方案----

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

Answer 1

prop 名称应为 faIcon（驼峰式）。

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

https://jsfiddle.net/asccyLus/

此外，如果像这样，最好为 faIcon 使用默认值而不是内联：

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

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

Laravel 中的 VueJS，无法使用 props 传递数据

VueJS inside Laravel, can't pass data using props

laravel

vue.js