显示Vue的组件的计算性能：Vue公司提醒]

我创建了一个简单的Vue 2部分：显示Vue的组件的计算性能：Vue公司提醒]

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”未在实例上定义，但在渲染过程中被引用。确保在数据选项中声明反应性数据属性。（在根实例中发现）

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

来源

2016-10-29 PeraMika

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

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

我的<template id="upper-template">在new Vue({el: '#app', ...）（它被放置在<div id="app">内），这就是为什么我得到这个警告。

来源

2016-10-30 14:21:52 PeraMika

显示Vue的组件的计算性能：Vue公司提醒]

回答

相关问题