Откуда берется billlable в компоненте update-payment-method-stripe Laravel Spark?

Question

Если Laravel Spark, есть компонент VUE со следующим встроенным шаблоном

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

Если я отслеживаю файл определения для компонента, я вижу это

#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 собственность взялась? Я предполагаю, что Вью использует некоторую форму метапрограммирования и / или магии, чтобы заполнить это, но я недостаточно знаком с Вю, чтобы знать, что происходит.

Answer 1

Получил ответ, который искал с помощью Bert и thanksd выше, а также отладчика Chrome VueJS

billable собственность была действительно вычисленной собственностью. Тем не менее, он не был рассчитан локально в update-payment-method-stripe.js файл определения. Вместо этого Spark имеет vue-bootstrap.js который содержит следующее

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

Оказывается, у VueJS есть глобальная функция mixin, которая (кажется?) Добавляет метод к каждому компоненту в системе. mixin модуль выглядит так

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

Это означает, что у каждого компонента в искре будет этот компьютер billable имущество.