How to change font size using custom directive in vuejs - vue.js

Question

I want to change the font size of the element using a custom directive
Thus I have tried below code for that
<template>
<div class="hello"><label v-onhover>CLICK ME TO CHANGE FONT</label></div>
</template>
<script>
export default {
name: "CustomDirective",
props: {
msg: String
},
directives: {
onhover: {
bind(el, binding) {
el.onmouseover = function() {
el.fontSize = "100px";
};
}
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
Inside the bind, I'm getting the complete label element but don't know how to get it worked for changing the user-defined font size on mouse hover

Answer 1

You want el.style.fontSize instead of el.fontSize.
Vue.directive('onhover', {
bind(el, binding) {
el.onmouseover = function() {
el.style.fontSize = "100px";
};
}
});
new Vue().$mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="hello">
<label v-onhover>Hover on me to change font</label>
</div>
</div>

Answer 2

After trying a few different ways, I have solved it out the situation
Below is my code for the solution
<template>
<div class="hello">
<label v-onhover>{{ msg }}</label>
</div>
</template>
<script>
export default {
name: "CustomDirective",
data() {
return {
str: "",
msg: "Welcome to Your Vue.js App"
};
},
directives: {
onhover: {
bind(el, binding) {
el.onmouseover = function() {
el.style.fontSize = "100px";
};
el.onmouseout = function() {
el.style.fontSize = "15px";
};
}
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
Here in the above example, I have used two different event mouseover and mouseout event and based on the event state, we can change the property of an element