`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`組件中來自哪裏？

回答

相關問題