"Native Code" message in return of VueJS method

Question

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.

Answer 1

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>
        `,
})

Answer 2

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