강의를 수강하던 도중 에러가 났는데 해결법을 도저히 모르겠습니다. 버튼을 누르면 이런 에러가 계속 나오네요...ㅠ
[Vue warn]: Unhandled error during execution of native event handler
at <Filterbox filter="_1977" image="blob:http://localhost:8080/96e66421-4432-4d51-8713-8cd1e4beef40" key="_1977" > at <Container onWrite=fn postData= ▶ (3) [{…}, {…}, {…}] step=1 ... > at <App>
runtime-core.esm-bundler.js?5c40:7053 Uncaught TypeError: Cannot read property 'emit' of undefined
at Proxy.fire (FilterBox.vue?dba8:13)
at Object.onClick._cache.<computed>._cache.<computed> (FilterBox.vue?dba8:4)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:6990)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:6999)
at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?830f:347)
<hr />
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'
let app = createApp(App)
let emitter = mitt();
app.config.globalProperties.emitter = emitter;
createApp(App).mount('#app')
//FilterBox.vue
<template>
<div :class="filter + ' filter-item'" :style="'background-image: url(${image})'">
<slot></slot>
<button @click="fire">버튼</button>
</div>
</template>
<script>
export default {
name: 'filterbox',
methods: {
fire(){
this.emitter.emit('작명', '데이터');
},
},
props: {
image: String,
filter: String,
},
};
</script>
//App.vue
export default {
name: "App",
components: {
Container,
},
data() {
return {
postData: Data,
cntmore: 0,
step: 0,
image: "",
myWriting : '',
};
},
mounted(){
this.emitter.on('작명', (a)=> {
console.log(a);
});
},
...
