Conditional style rendering with Vue.js

I don't really get your code but if you want conditional style binding you can do like that:

<template>
    <div
        :style="condition ? { 'color': 'red' } : { 'color': 'blue' }"
    >
        Some data
    </div>
</template>

<script>
export default {
    data() {
        return {
            condition: false
        }
    }
}
</script>

I'm not sure what you're trying to do. but you want to make a div smaller or bigger? If so, you can use a computed var to evaluate that value. And because it's reactive, if you change any of those values it will evaluate the value on the fly.

a small example:

<style>
  .classA {float:right,width:200px}
  .classB {float:right,width:400px}
</style>

on your HTML

<div id="#app">
<div class="{{ classChanger }}">your stuff</div>
</div>

and on your Vue

computed:{
    classChanger: function(){
        var theClass = 'classB';
        if(this.conversation.minimized == false){
            theClass = 'classA';
        }
        return theClass:
    }
}

It harder without knowing your code exactly.

currentItemPosition: function(index, conversation) {
            var indexOfCurrentElement = this.conversations.indexOf(conversation);  
            var right = 0;

            if (indexOfCurrentElement > 0) {
                for (var i=0; i<indexOfCurrentElement; i++) {
                    if (!this.conversations[i].minimized) {
                        right += 285;
                    } else {
                        right += 170;
                    }
                }
                return "right: " + right + "px";

            } else {
                return "right: 0px";
            } 
        }
    }

That's how i solved my problem.

<div class="card" v-bind:style="currentItemPosition($index, conversation)">

Works perfectly for me right now. There was to much logic anyway to do it in line with <div> tag.

To make things more modular, we could create a component that would wrap the logic for the div and the styles. The usage would be:

<card :index="$index" :minimized="conversation.minimized"></card>

And the definition of the component is:

Vue.component( 'card', {
    props: ['index', 'minimized'],
    template: '\
        <div class="card" :style=[cardStyles]>\
    ',
    computed: function () {
        cardStyles: function () {
            var ratio = this.minimized ? 150 : 285;
            return {
                right: ( this.index * ratio ) + 'px'
            }
        }
    }
} );

It receives the index and the minified value, and then uses a computed function to obtain the div styles.