vuejs (2) style binding top/left properties

Question

I'm trying to bind two style properties within a json object to an element in my html. I've tried using pixels and percentages, written in various ways (I realize pixel coordinates shown below do not match where % coordinates would place something, this is just an example).

{left: 30 + 'px', top:25 + 'px'} {left: '30px', top:'25px'}

{left: 30 + '%', top:25 + '%'} {left: '30%', top:'25%'}

and I'm binding like: `v-bind:style="objnamehere"

When I reload the page, the element is not positioned at those locations. I'm not sure what I'm doing wrong. One of those should have worked based off the official examples here: https://v2.vuejs.org/v2/guide/class-and-style.html

Answer 1

In my case work this:

<div class="caption-text" :style="{top:y + 'px',left:x+'px'}">

Y and X are props in my Vue component

'top' and 'left' are css properties

Hope it will help somebody