My goal is to have my function defined in the 'methods' section execute when my element is clicked. However, the event listener only works when I use an anonymous function like
el.addEventListener('click', function() {console.log('hi'))
But when I set a function in methods, it gives me error messages like:
vue.js?3de6:634 [Vue warn]: Error in directive myDirective bind hook: "ReferenceError: sizechange is not defined"
This error occurs in the following location:
---> at /Users/soonkpaik/Downloads/Start 2/src/App.vue Here's my code:
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<h1 v-myDirective:sizechange='{ inisize:100, finsize:500, color:"pink", blinkcolor:"red" }'>Directives Exercise!</h1>
<!-- Exercise -->
<!-- Build a Custom Directive which works like v-on (Listen for Events) -->
</div>
</div>
</div>
</template>
<script>
export default {
directives:{ myDirective:{
bind(el,binding,vnode){
let maincolor=binding.value.color;
let newcolor=binding.value.blinkcolor;
let currentcolor=maincolor;
setInterval( ()=>{
currentcolor==newcolor? currentcolor=maincolor : currentcolor=newcolor
el.style.backgroundColor=currentcolor
},500)
el.addEventListener('click',sizechange)
}
}
},
methods:{
sizechange() {
console.log('hi')
}
},
}
</script>
<style>
</style>
I'm seeking help on why this isn't working properly. Thank you so much.