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