プロパティまたはメソッドが.vueファイルで定義されていない

Question

javascriptを追加するまで、アプリケーションのすべてが正常に動作していました。今度は、コンソールでエラーが継続的に発生します。

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.

と同様に、このエラー：

は、私はこのエラーを取得する

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

望ましい結果： "loginBtn" をクリックしてアラートが "クリック" プロンプトが表示されます。

---

マイコード：

// 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

あなたはSingle-File Component（.vueファイル）を使用している、vue-loaderで使用されるVueのコンポーネント定義のためのファイル形式です。

.vueファイルのスクリプトセクション（<script>タグの内容）は、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.

---

現在、唯一のVueはshow方法を見つけることができない理由である、{ name: 'app' }を輸出しています。オブジェクトのdataプロパティがデータのプロパティを返す関数であることが必要に輸出していることも

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

注：

あなた<script>セクションでは、次のようになります。 See the "Why does data need to be a function" section of Vue's Common Beginner Gotchas page.