Where does `billlable` come from in Laravel Spark's `update-payment-method-stripe` Component?

Question

If Laravel Spark, there's a vue component with the following inline template

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

This template include the variable billable.card_last_four.

If I track down the definition file for the component, I see this

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

and if I track down the base component, I see a vue component defined

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

However, none of these components seem to define billable anywhere. I see a lot of references to 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 '';
}
/* ... */

Where does this billable property come from? I assume Vue's doing some form of meta-programming and/or magic to populate this, but I'm not familiar enough with Vue to know what's going on.

@thanksd Yes and No. Laravel Spark is a private repository for paying customers — Alana Storm, Jul 28 '17 at 18:21
Possibly a plugin defined somewhere. Could search for Vue.use — Bert, Jul 28 '17 at 18:22
Or it could be a [computed property](https://vuejs.org/v2/guide/computed.html#Basic-Example) (not sure how unfamiliar with Vue you are) — thanksd, Jul 28 '17 at 18:25
@BertEvans Thank you, I didn't know about plugins. They don't look to be the culprits here (no Vue.use calls) but good to know! — Alana Storm, Jul 28 '17 at 18:34
@thanksd Thank you! There's a section for computed properties -- but no `billable`. However, the Vue Chrome debugger says billable **is** a computed property -- can computer properties be defined on a component (or set of component) globally or non-locally? (very unfamiliar with Vue) — Alana Storm, Jul 28 '17 at 18:35
Or does the base use mixins? Computed properties defined in mixins get assigned to the component using that mixin — thanksd, Jul 28 '17 at 18:41
Thanks both -- see answer below. Looks like Spark's using Vue.mixin to add some mixins globally. — Alana Storm, Jul 28 '17 at 18:44

score 3 · Accepted Answer · edited Jul 15 '22 at 22:03

Got the answer I was looking for with help from Bert Evans and thanksd above, as well as the Chrome VueJS debugger

The billable property was, indeed, a computed property. However, it wasn't computed locally in the update-payment-method-stripe.js definition file. Instead, Spark has a vue-bootstrap.js which contains the following

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

It turns out VueJS has a global mixin feature which (appears to?) add a method to every component in the system. The mixin module looks like this

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

Which means every component in spark will have this computer billable property.

Where does `billlable` come from in Laravel Spark's `update-payment-method-stripe` Component?

1 Answers1