.vue 파일에 정의되지 않은 속성 또는 메서드

Question

자바 스크립트를 추가하기 전까지 내 앱의 모든 것이 완벽하게 작동했습니다. 이제 콘솔에서 계속 오류가 발생합니다.

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 (A .vue 파일)을 사용하고, vue-loader 사용하는 뷰 구성 요소 정의에 대한 파일 형식입니다.

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

---

당신은 단지 뷰가 show 방법을 찾을 수없는 이유 { name: 'app' }을 수출하고 있습니다

.

귀하의 <script> 섹션은 다음과 같아야합니다

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

참고 또한 객체의 data 속성이 요구를 수출하는 데이터의 속성을 반환하는 함수가 될 수 있습니다. See the "Why does data need to be a function" section of Vue's Common Beginner Gotchas page.