CODEWITHSUNDEEP
javascriptvue.js
Mathias Hillmann
Mathias Hillmann

Reputation: 1837

Vue computed property returns the whole function instead of the value

I have this computed prop:

methods: {
    url_refresh: function (id) {
        return `${this.url_base}?start=${Date.now()}`
    }
}

And when i try to console log on mount:

mounted() {
    console.log(this.url_refresh);
},

It logs the function instead of the value:

enter image description here

How do I get the value instead of the function?

Its supposed to return http://localhost/admin/agenda/refresh?agenda_id=2&start=2020-11-29T00:00:00-03:00

Upvotes: 1

Views: 2751

Answers (2)

Michal Levý
Michal Levý

Reputation: 37923

Computed Caching vs Methods

Main point of using computed is caching behavior. Hence it doesn't make sense to pass any argument into computed (the result should depend only on other reactive data). If you need argument, use methods instead...

Upvotes: 0

Ballon Ura
Ballon Ura

Reputation: 922

You are probably use methods instead of computed, look here

Should Work for you (tested):

<template>
  <div>
    Your Template
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.url_refresh);
  },
  data() {
    return { url_base: "http://localhost/admin/agenda/refresh" };
  },
  computed: {
    url_refresh() {
      return `${this.url_base}?start=${Date.now()}`;
    }
  },
};
</script>

Will log: http://localhost/admin/agenda/refresh?start=1607431794589

Upvotes: 3

Related Questions