显示 Vue 组件的计算属性：[Vue 警告]

Posted 2023-02-23

【中文标题】显示 Vue 组件的计算属性：[Vue 警告]

【英文标题】：Displaying Vue Component's computed property: [Vue warn]

【发布时间】：2017-03-12 11:16:39

【问题描述】：

我创建了一个简单的 Vue 2 组件：

Vue.component('upper', 
    props: ['value'],

    template: '#upper-template',

    computed: 
        formattedValue: function() 
            return this.value.toUpperCase();
        
    
);

这是模板：

<template id="upper-template">
    <span> formattedValue </span>
</template>

当我使用它时：

<upper value="test"></upper>

它工作正常，但我收到以下警告：

[Vue 警告]：属性或方法“formattedValue”未在 实例，但在渲染期间引用。确保声明反应式 数据选项中的数据属性。 （在根实例中找到）

你能告诉我我的代码有什么问题吗？我该如何解决这个问题？我阅读了文档，但我不明白我做错了什么。

【问题讨论】：

我在本地尝试了同样的方法，但没有收到任何警告。正如预期的那样，它工作正常。该错误可能来自组件中的不同区域，您能否提供更多代码，无论您在哪里使用formattedValue？

好的，问题是我的模板在Vue的el中。

【参考方案1】：

我的 <template id="upper-template"> 位于 new Vue(el: '#app', ... 中）（它位于 <div id="app"> 中），这就是我收到该警告的原因。