Eigenschaft oder Methode, die nicht in der .vue-Datei definiert ist

Question

Alles in meiner App funktionierte einwandfrei, bis ich anfing, mein Javascript hinzuzufügen. Jetzt bekomme ich ständig Fehler in der Konsole.

ich diesen Fehler:

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.

Neben diesen Fehler:

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

Gewünschtes Ergebnis: Klicken Sie auf "loginBtn" alert fordert "Klick".

---

Mein 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

Sie verwenden eine Single-File Component (eine .vue-Datei), die ein Dateiformat für eine Vue Komponentendefinition von vue-loader verwendet wird.

Der Skriptabschnitt einer Datei .vue (was innerhalb des Tags <script> ist) sollte ein Objekt exportieren, das die Definition der Vue-Instanz angibt.

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.

---

Sie derzeit { name: 'app' } nur exportieren, weshalb Vue ist nicht die show Methode finden können.

Ihr <script> Abschnitt sollte wie folgt aussehen:

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

Beachten Sie auch, dass die data Eigenschaft des Objekts Bedürfnisse exportiert eine Funktion Rückgabe der Dateneigenschaften sein. See the "Why does data need to be a function" section of Vue's Common Beginner Gotchas page.