Question

这是代码（非常简单）

fa-star-o

这是returnig <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>而不是所需的fa-icon。我真的没有看到任何错误，但我是新手，所以我希望它有些微不足道。

我跟随此enter image description here。

---- ----解

{{1}}

Answer 1

prop名称应为faIcon（camelCased）。

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无法使用道具传递数据

1 个答案: