顯示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公司提醒]

回答

相關問題