I am trying to use VueJS to dynamically change the position of a div. In the data function, I have a variable called x that I want to assign to the top property. However, the code I wrote doesn't seem to be working. Here is what it looks like:
<template>
<div id="squar" v-if="showSquar" :style="{top: x}" @click="countClicks">
click here
</div>
</template>
And in the style tag:
#squar{
width: 100px;
height: 100px;
border-radius: 5px;
background: rgb(0,70,40,0.8);
color: white;
text-align: center;
vertical-align: middle;
line-height: 100px;
position: absolute;
}
The component I am working on is not the App component.