Laravel Spark 的 `update-payment-method-stripe` 组件中的 `billlable` 来自哪里？答案

【问题标题】：Where does `billlable` come from in Laravel Spark's `update-payment-method-stripe` Component?Laravel Spark 的 `update-payment-method-stripe` 组件中的 `billlable` 来自哪里？
【发布时间】：2018-01-04 21:38:03
【问题描述】：

如果是 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 属性从何而来？我假设 Vue 正在做某种形式的元编程和/或魔法来填充它，但我对 Vue 不够熟悉，不知道发生了什么。

【问题讨论】：

这是在 github 上的某个地方吗？
@thanksd 是和否。Laravel Spark 是付费客户的私有存储库
可能是某个地方定义的插件。可以搜索 Vue.use
或者它可能是computed property（不确定你对 Vue 有多陌生）
@BertEvans 谢谢，我不知道插件。他们看起来不是罪魁祸首（没有 Vue.use 调用），但很高兴知道！

标签： laravel vue.js laravel-spark

【解决方案1】：

在上面的Bert Evans 和thanksd 以及Chrome VueJS debugger 的帮助下得到了我正在寻找的答案

billable 属性确实是一个计算属性。但是，它不是在 update-payment-method-stripe.js 定义文件中本地计算的。相反，Spark 有一个 vue-bootstrap.js，其中包含以下内容

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

事实证明 VueJS 有一个 global mixin 特性（似乎是？）为系统中的每个组件添加一个方法。 mixin 模块如下所示

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

这意味着 spark 中的每个组件都将具有此计算机 billable 属性。

【讨论】：