如何从Vue中objet方法中的另一个函数的计算属性调用函数

Question

我正在尝试调用一个在Vue的计算对象上定义的函数。

<template>
<v-text-field
v-model="formatedDateInputField"
label="Start Date"
v-bind="attrs"
v-on="on"
:disabled="isLoading"
@click:clear="clearAndRefresh()"
></v-text-field>
<template>
------------------------------------------------------------------------------------
computed: {
formatedDateInputField: {
get() {
return this.dates && this.dates.length > 1
? this.dates.join(" to ").replace(/-/g, "/")
: "";
},
set(value) {
this.dates = value === null ? [] : value;
}
}
},

我需要再次调用它来重新定义文本字段的值，但是当我从另一个函数调用它时，我会得到以下控制台错误：

• "vue.runtime.esm.js:619 [Vue warn]: Error in v-on handler: "TypeError: this.formatedDateInputField is not a function"
• this.formatedDateInputField is not a function

我尝试了不同的方法来命名它，但都没有成功。

(this.formatedDateInputField , this.formatedDateInputField(), this.formatedDateInputField.get() , etc... )

我想知道我需要做什么来再次运行这个计算函数，以便触发我的文本字段的v-model值。

编辑：经过进一步的检查，我想我要做的是重新计算，也就是说，再次运行计算的属性。

Answer 1

我认为问题在于您试图将formatedDateInputField用作函数，而实际上它是一个变量。只需将其用作变量即可。

getter在读取变量时执行。

console.log(this.formatedDateInputField)

以及当你试图覆盖它时的setter。

this.formatedDateInputField = '2022-02-02'