How to access a computed property from a method in a Single File Component with Vue.js

Question

I have a normal single file component which has both a computed property and some methods:

<template>...</template> <script> ... export default {     props: ['matches'],     data: function() {...}  // No problem with these      computed: {         formattedMatches: function () {             let formatted = [];             this.matches.forEach(function($match, $i, $arr) {                 formatted[$i] = $match[0];             };         });         return formatted;     }     ...      methods: {         getData: function() {             return this.formattedMatches();         },         ...     } } <script> 

When I try to access this.formattedMatches() from the method, I get a [Vue warn]: Error in render: "TypeError: this.formattedMatches is not a function" .

What is the correct way to achieve what I want? Thanks in advance.

Answer 1

You can access computed properties like a property, not like a method:

// correct     console.log(this.myProperty);  // wrong     console.log(this.myProperty()); 

Note: If you treat it as a method with paracentesis () it shall throw an error like this Error in v-on handler: "TypeError: this.myProperty is not a function".