如何在方法函数中使用计算函数？答案

【问题标题】：How can I use a computed function inside a method function?如何在方法函数中使用计算函数？
【发布时间】：2020-11-04 17:39:54
【问题描述】：

您好，我正在尝试在方法函数中调用计算函数。

VueJs 代码：

<script>
export default {
    created() {
        this.isDisabled(0);
    },
    data: function() {
        return {
            form: {
                branch_office_id: null,
                cashier_id: null,
                gross_amount: '',
                released_tickets: '',
                start_ticket: '',
                end_ticket: '',
                z_inform_number: '',
                created_at: '',
                support: null,
                error_end_bill_number_validation: ''
            },
            postsSelected: "",
            branch_office_posts: [],
            cashier_posts: []
        }
    },
    methods: {
        checkEndBillNumber() {
            if(this.form.start_ticket > this.form.end_ticket) {
                this.isDisabled(1);
                this.$awn.alert("El número de boleta inicial no puede ser ", {labels: {success: "Error"}});
            } else {
                this.isDisabled(0);
            }
        }
    },
    computed: {
        isDisabled(value) {
            if(value == 0) {
                return true;
            } else {
                return false;
            }
        }
    }
}
</script>

我正在尝试在 checkEndBillNumber() 方法函数中使用 isDisabled() 函数，但是当我这样做时它说：

[Vue 警告]：v-on 处理程序中的错误：“TypeError：this.isDisabled 不是函数”

所以我想知道如何使用它？我怎样才能做到这一点？谢谢！

【问题讨论】：

你不能在计算函数中传递参数。

标签： vue.js vuejs2 vuejs3

【解决方案1】：

上面提到的计算属性不是函数。因此，传递 isDisabled(value) 之类的参数将不起作用。但是你可以欺骗它匿名接受这样的值

computed: {
   isDisabled() {
      return (value) => { 
        if(value == 0) return true;
        else return false;
      }
   }
}

这样你就不需要数据属性了。

【讨论】：

这是一个巧妙的技巧，但这是否也完成了缓存？这就是计算属性的作用和用途。事实上，这里的这个例子本身并没有用，因为它应该是一个简单的方法，而不是一个计算属性，我猜。但这仍然是 OP 所要求的。

【解决方案2】：

您没有计算出的函数，而是计算出的属性！因此，您必须将要用作参数的值存储在计算的 property 中 - 例如在data 属性中，然后使用它：

<script>
export default {
    created() {
        this.disabledParam = 0;
        this.isDisabled; // Evaluates to "true" - what do you want with that result?
    },
    data: function() {
        return {
            form: {
                branch_office_id: null,
                cashier_id: null,
                gross_amount: '',
                released_tickets: '',
                start_ticket: '',
                end_ticket: '',
                z_inform_number: '',
                created_at: '',
                support: null,
                error_end_bill_number_validation: ''
            },
            postsSelected: "",
            branch_office_posts: [],
            cashier_posts: [],
            disabledParam: null,
        }
    },
    methods: {
        checkEndBillNumber() {
            if (this.form.start_ticket > this.form.end_ticket) {
                this.disabledParam = 1;
                this.isDisabled; // Evaluates to "false" - what to you want to do with that value?
                this.$awn.alert("El número de boleta inicial no puede ser ", {labels: {success: "Error"}});
            } else {
                this.disabledParam = 0;
                this.isDisabled; // Evaluates to "true" - what to you want to do with that value?
            }
        }
    },
    computed: {
        isDisabled() {
            if (this.disabledParam == 0) {
                return true;
            } else {
                return false;
            }
        }
    }
}
</script>

另外，请注意，即使您可以将它们用作函数，您对isDisabled(1) 的调用也不会如此。您可能应该对isDisabled 的返回值做一些事情。而且您不需要以这种方式计算属性 - 在您的示例中，您应该简单地创建 isDisabled(value) 作为另一种方法并调用它。但我猜你的代码只是一个例子，而不是你的真实代码。计算属性通常用作模板中的值。

我的示例代码只是为了说明如何将参数传递到计算属性的代码中。除此之外，您的代码还有一些问题。

【讨论】：