when using the following code: https://github.com/iamshaunjp/vuejs-playlist/blob/lesson-18/src/App.vue
My browser displays function () { [native code] } where it should display "heeey cowboy".
Any idea what's going on? I'm working from the tutorial here, using the CLI, and everything is identical to the provided files.
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
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>
`,
})
In my case it was nothing wrong with my code. I just had to delete node_modules folder, rebuild the app, unregister the service worker, refresh the app and it started to work
:, some()or doing something to cause Vue to try to output a literal function as apposed to calling something.