`billlable`在Laravel Spark的`update-payment-method-stripe`组件中来自哪里？

如果Laravel星火，有一个与下面的联模板`billlable`在Laravel Spark的`update-payment-method-stripe`组件中来自哪里？

<spark-update-payment-method-stripe :user="user" :team="team" :billable-type="billableType" inline-template> 
    /* ... */ 
      <div class="pull-right"> 
       <span v-if="billable.card_last_four"> 
        <i :class="['fa', 'fa-btn', cardIcon]"></i> 
        ************@{{ billable.card_last_four }} 
       </span> 
      </div> 
    /* ... */ 
</spark-update-payment-method-stripe>

该模板包括变量billable.card_last_four一个VUE组件。

如果我追查该组件的定义文件，我看到这个

#File: resources/assets/js/spark-components/settings/payment-method/update-payment-method-stripe.js 
var base = require('settings/payment-method/update-payment-method-stripe'); 

Vue.component('spark-update-payment-method-stripe', { 
    mixins: [base] 
});

，如果我追查基础组件，我看到一个VUE组件定义

#File: spark/resources/assets/js/settings/payment-method/update-payment-method-stripe.js 
module.exports = { 
    props: ['user', 'team', 'billableType'], 
/* ... */

然而，没有这些组件似乎在任何地方都定义了billable。我看到很多对this.billable的引用。

#File: spark/resources/assets/js/settings/payment-method/update-payment-method-stripe.js 
/* ... */ 

this.form.address = this.billable.billing_address; 
this.form.address_line_2 = this.billable.billing_address_line_2; 
this.form.city = this.billable.billing_city; 
this.form.state = this.billable.billing_state; 
this.form.zip = this.billable.billing_zip; 
this.form.country = this.billable.billing_country || 'US'; 

/* ... */     
placeholder() { 
    if (this.billable.card_last_four) { 
     return `************${this.billable.card_last_four}`; 
    } 

    return ''; 
} 
/* ... */

billable这个属性来自哪里？我假设Vue采用某种形式的元编程和/或魔术来填充这个，但我对Vue不太了解，不知道发生了什么。

来源

2017-07-28 Alan Storm

这是在github某处吗？ – thanksd

@thanksd是和否。Laravel Spark是支付客户的私人存储库 –

可能是某个地方定义的插件。可以搜索Vue.use – Bert

得到我的帮助从Bert Evans和thanksd找上面的答案，还有Chrome VueJS debugger

的billable财产，实际上是一个计算的属性。但是，它在本地不在update-payment-method-stripe.js定义文件中进行计算。取而代之的是，星火有一个vue-bootstrap.js包含在系统下面

Vue.mixin(require('./mixin'));

原来VueJS有global mixin功能，（似乎）添加一个方法到每一个部件。该mixin模块看起来像这样

#File: spark/resources/assets/js/mixin.js 
module.exports = { 
    computed: { 
     /** 
     * Get the billable entity. 
     */ 
     billable() { 
      /* ... */ 
     }, 
     /* ... */ 
    } 
};

这意味着火花每一个组件都会有这样的计算机billable属性。

来源

2017-07-28 18:43:53

`billlable`在Laravel Spark的`update-payment-method-stripe`组件中来自哪里？

回答

相关问题