返回VueJS方法的"本地代码"消息

Question

使用以下代码时:https: //github.com/iamshaunjp/vuejs-playlist/blob/lesson-18/src/App.vue

我的浏览器显示function () { [native code] }它应显示"heeey cowboy"的位置.

知道发生了什么事吗？我在这里使用CLI 进行教程,所有内容都与提供的文件完全相同.

Answer 1

你忘记了括号配偶:

<template>
    <div>
        <h1>{{ title }}</h1>
        <p>{{ greeting() }}</p>
    </div>
</template>

错误在于greeting,您忘记在其后添加这些括号(),这就是您调用javascript函数的方式

Answer 2

方法：与计算：

在 Vue 3 中，在将 main.js 的部分内容重构为模板时，我错误地将computed:（属性）复制/粘贴到methods:myTemplate.js 中。

当我重新运行应用程序时，我看到：

function () { [native code] }

...而不是从函数返回值。

将我的计算属性移至methods:mycomputed:部分后app.component，模板正确调用了函数。

要在 Vue 中使用计算属性，我们不需要()，就像get方法一样。

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