Vue - Update rendered elements from a v-for with :style that uses their values [duplicate] - arrays

Question

I'm looping through elements and I'm positioning div using top and left CSS properties:
<div
v-for="coord in coords"
:style="{ top: coord.y + 'px', left: coord.x + 'px' }"
></div>
Sometimes instead of top property I need to use bottom (this depends on one of my Vuex store values). How can I dynamically define if I should use top or bottom CSS property?
I tried to used computed prop isTopOrBottom which would return 'top' or 'bottom: :style="{ isTopOrBottom: coord.y + 'px', left: coord.x + 'px' }". But this is not working in Vue.

Answer 1

You can use the ternary operator (in case computed properties are not working)
For example:
<span
class="description"
:class="darkMode ? 'dark-theme' : 'light-theme'"
>
Hope this help.

Answer 2

It should be like JavaScript string concatenation
<div
v-for="coord in coords"
:style="'top: '+coord.y + 'px;left: '+coord.x + 'px'"
></div>
Vue.config.productionTip = false;
Vue.config.devtools=false;
var app = new Vue({
el: '#app',
data:{
coords:[{y:10,x:10},{y:20,x:20},{y:30,x:30}]
}
});
.border-line{
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
<div class="border-line"
v-for="coord in coords"
:style="'margin-top: '+coord.y + 'px;margin-left: '+coord.x + 'px'"
>Test</div>
</div>

Answer 3

You could do something like this:
:class="{ is-top: isTop, is-bottom: isBottom }"
And in your script:
computed() {
isTop() {
// return top condition
},
isBottom() {
// return bottom condition
}
}
Handle css:
.is-top {
...
}
.is-bottom {
...
}

Answer 4

You can also use a Vuejs custom directive for this! https://v2.vuejs.org/v2/guide/custom-directive.html
Check this out:
In your template:
<p v-position="expressionThatMakesItTop" v-if="isSignedIn">Welcome back {{user.email}}</p>
If you want to register a directive locally, components also accept a directives option, check that out on the documentation I linked.
I am going to show you how to do it globally so in your main.js file, before constructing the Vue instance of course:
I left the console.log that displays the objects that you can use in your directive so you can explore them on your console and tailor this to your needs.
Vue.directive("position", {
bind: function(el, binding, vnode) {
console.log(el, binding, vnode);
el.style.left = `${vnode.context.coord.x}px`;
if (binding.value) {
el.style.top = `${vnode.context.coord.y}px`;
return;
}
el.style.bottom = `${vnode.context.coord.y}px`;
}
});