Vue Bauteile berechnet Eigenschaft angezeigt: [Vue warnen]

Question

habe ich eine einfache Vue 2-Komponente:

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

    template: '#upper-template', 

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

Hier ist die Vorlage:

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

Und wenn ich es:

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

es funktioniert gut, aber ich bekomme die folgende Warnung:

[Vue warn]: Die Eigenschaft oder Methode "formatValue" ist nicht für die Instanz definiert, wird aber während des Renderns referenziert. Stellen Sie sicher, dass Sie in der Datenoption reaktive Dateneigenschaften deklarieren. (gefunden in der root-Instanz)

Können Sie mir sagen, was mit meinem Code nicht stimmt und wie kann ich das beheben? Ich habe die Dokumentation gelesen, aber ich konnte nicht verstehen, was ich falsch mache.

Answer 1

Mein <template id="upper-template"> war in new Vue({el: '#app', ...) (es wurde in <div id="app"> platziert), und deshalb bekam ich diese Warnung.