"Native Code" message in return of VueJS method
You forgot the parenthesis mate:
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ greeting() }}</p>
</div>
</template>
The error is in greeting
, you forgot to add these parenthesis after it ()
, that's how you call a javascript function
methods: vs. computed:
In Vue 3, while refactoring parts of main.js into a template, I mistakenly copy/pasted computed:
(properties) into methods:
in myTemplate.js.
When I re-ran app, I saw:
function () { [native code] }
... instead of return values from functions.
After moving my computed properties from methods:
into computed:
section of my app.component
, the template called the functions properly.
To use Computed Properties in Vue we don't need ()
, just like get
methods.
app.component('your-template', {
props: {
someObject: {
type: Object,
required: true
}
},
methods: {
/* METHODS WITH ARGUMENTS - callWith(args) */
},
computed: {
/* PROPERTIES - call without () */
lastUpdated() {
let _date = new Date(this.bookshelf.modified)
return _date.toLocaleString()
},
},
template:
/*html*/
`
<h3>
{{ someObject.name }}
</h3>
<div>Updated: {{ lastUpdated }}</div>
`,
})