How to call a function from computed properties from another function in methods objet in Vue

Viewed 132

I am trying to call a function which is defined on the computed object of 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;
            }
        }
    },

I need to call it again to redefine the values of my text field, however when I call it from another function I will get the following console error :

  • "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

I tried different ways to call it, however none was sucessfull.

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

I want to know what I need to do to run this computed function again in order to trigger the v-model value of my text field.

EDIT : After further inspection I guess what I am trying to do is to recompute, this is , run the computed property again.

1 Answers

I think the problem is that you're trying to use formatedDateInputField as a function, when it's in fact a variable. Just use it as a variable.

The getter is executed when you read the variable.

console.log(this.formatedDateInputField)

And the setter when you try to overwrite it.

this.formatedDateInputField = '2022-02-02'
Related