I'm currently working on a VueJS project where I have a div acting as a canvas displaying the coordinates of the mouse within that canvas. My goal is to underline the coordinates when they are within 20px of the center, but being new to VueJS, I'm not quite sure how to approach this.
Here's the code:
<div id="canvas" v-bind:class="canvasClasses" @mousemove="getCoordinates">
{{coordinates.x}},{{coordinates.y}}
</div>
And here is the corresponding JavaScript:
var canvas = new Vue ({
el: '#canvas',
data: {
canvasClasses: ["canvas", "font"],
underlineClass: ["underlineFont"],
coordinates: {
x: 0,
y: 0
}
},
methods: {
getCoordinates(ml){
this.coordinates.x = ml.offsetX;
this.coordinates.y = ml.offsetY;
}
}
})
Finally, the CSS:
.canvas{
width: 500px;
height: 500px;
display: block;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #74b9ff;
}
.font{
font-family: monospace;
font-size: 1.5rem;
color: #FFFFFF;
}
.underlineFont{
text-decoration: underline;
}