D'où vient `billlable` dans le composant `update-payment-method-stripe` de Laravel Spark?

Question

Si Laravel Spark, il y a un composant vue avec le modèle en ligne suivant

    /* ... */

                    ************@{{ billable.card_last_four }}

    /* ... */

Ce modèle inclut la variable billable.card_last_four.

Si je cherche le fichier de définition pour le composant, je vois ceci

#Fichier: ressources/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]
});

et si je cherche le composant de base, je vois un composant vue défini

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

Cependant, aucun de ces composants ne semble définir billable nulle part. Je vois beaucoup de références à this.billable.

#Fichier: spark/ressources/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 '';
}
/* ... */

D'où vient cette propriété billable? Je suppose que Vue fait une forme de méta-programmation et/ou de magie pour la remplir, mais je ne suis pas assez familier avec Vue pour savoir ce qui se passe.

Answer 1

J'ai obtenu la réponse que je cherchais avec l'aide de Bert Evans et thanksd ci-dessus, ainsi que le débogueur Chrome VueJS

La propriété billable était en effet une propriété calculée. Cependant, elle n'était pas calculée localement dans le fichier de définition update-payment-method-stripe.js. Au lieu de cela, Spark a un fichier vue-bootstrap.js qui contient le code suivant :

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

Il s'avère que VueJS a une fonctionnalité de mixin globale qui ajoute une méthode à chaque composant du système. Le module mixin ressemble à ceci :

#Fichier: spark/resources/assets/js/mixin.js
module.exports = {
    computed: {
        /**
         * Obtenir l'entité facturable.
         */
        billable() {
            /* ... */
        },
        /* ... */
    }
};

Cela signifie que chaque composant dans spark aura cette propriété calculée billable.