`billlable`はLaravel Sparkの` update-payment-method-stripe`コンポーネントのどこにありますか？

Question

Laravelスパークは、以下のインラインテンプレート

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

とVUEのコンポーネントがある場合、このテンプレートは、変数billable.card_last_fourが含まれます。

私はコンポーネントの定義ファイルを追跡した場合、私はこの

#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] 
}); 

を見て、私は基本コンポーネントを追跡すれば、私はしかし

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

を定義しVUEのコンポーネントを参照してください、なしこれらのコンポーネントのうち、どこにでもbillableが定義されているようです。 this.billableへの参照がたくさんあります。

このbillableのプロパティはどこから来ますか？私はVueのメタプログラミングやマジックを使ってこれを実装しようとしていますが、何が起きているのかを知るにはVueにはあまり精通していません。

Answer 1

は、私がBert Evansと上記thanksdからの助けを借りて探していた答えを得ただけでなく、Chrome VueJS debugger

billableプロパティは、確かに、計算された財産でした。ただし、定義ファイルupdate-payment-method-stripe.jsでローカルに計算されませんでした。代わりに、スパークは、それがVueJSがglobal mixin機能がある判明（に見える？）を、システム内のすべてのコンポーネントにメソッドを追加し、次の

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

が含まれているvue-bootstrap.jsを持っています。 mixinモジュールは、スパーク内のすべてのコンポーネントがこのコンピュータbillable性質を持っていることを意味します。この

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

のように見えます。