Propriété ou méthode non définie dans le fichier .vue

Question

Tout dans mon application fonctionnait parfaitement bien jusqu'à ce que je commence à ajouter mon javascript. Maintenant, je reçois continuellement des erreurs dans la console.

Je reçois cette erreur:

Property or method "show" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

En plus cette erreur:

TypeError: _vm.show is not a function 
    at click App.vue?d98c:25 
    at HTMLButtonElement.invoker vue.esm.js?efeb:1906 

Résultat souhaité: Cliquez sur "loginBtn" alerte demande "cliquez sur".

---

Mon code:

// app.vue script 
export default { 
    name: 'app' 
} 

var show = new Vue({ 
    el: '#loginBtn', 
    data: { 
    n: 0 
    }, 
    methods: { 
    show: function(event) { 
     targetId = event.currentTarget.id; 
     alert('click') 
    } 
    } 
}) 

<!-- the button --> 
<template> 
    <div> 
    <button v-on:click="show($event)" id="loginBtn">Login</button> 
    </div> 
</template> 

Answer 1

Vous utilisez un Single-File Component (un fichier .vue), qui est un format de fichier pour une définition de composants Vue utilisée par vue-loader.

La section de script d'un fichier .vue (à l'intérieur de la balise <script>) doit exporter un objet spécifiant la définition de l'instance de Vue.

From the documentation:

The script must export a Vue.js component options object. Exporting an extended constructor created by Vue.extend() is also supported, but a plain object is preferred.

---

Vous n'êtes actuellement exporter { name: 'app' }, ce qui explique pourquoi la méthode Vue show ne peut pas trouver.

Votre section <script> devrait ressembler à ceci:

<script> 
    export default { 
    name: 'app', 
    data() { 
     return { n: 0 } 
    }, 
    methods: { 
     show: function(event) { 
     targetId = event.currentTarget.id; 
     alert('click') 
     } 
    } 
    } 
</script> 

Notez également que la propriété data de l'objet exporté doit être une fonction renvoyant les propriétés de données. See the "Why does data need to be a function" section of Vue's Common Beginner Gotchas page.