CODEWITHSUNDEEP
javascriptcssvue.jsconditional-statementsternary-operator
mheavers
mheavers

Reputation: 30158

Vuejs Ternary Operator / Conditional Not Working in v-bind-style

I'm getting some weird behavior trying to implement a conditional for the style of items in Vuejs.

I have seen S.O. posts on how to implement a ternary, via both an interpolated string or a computed style object. I've tried both but neither works properly.

Given this div:

<div 
    :class="{'radar__container':true,'inactive':inactive}"
    :style= "[inactive ? {getStyleRadarContainerInactive} : {getStyleRadarContainer}]"
  >

I would implement this style:

computed: {
    getStyleRadarContainer: function(){

        let styleRadarContainer = {
            left: this.radarItem.posX*100 + '%', 
            top: this.radarItem.posY*100 + '%',
            transform: 'translate(-50%,-50%) scale(' + this.radarItem.scale + ')',
            opacity: this.radarItem.opacity,
        }

        return styleRadarContainer;
    },
    getStyleRadarContainerInactive: function(){

        let styleRadarContainerInactive= {
            left: this.radarItem.posX*100 + '%', 
            top: this.radarItem.posY*100 + '%',
            transform: 'translate(-50%,-50%) scale(0)',
            opacity: this.radarItem.opacity,
        }

        return styleRadarContainerInactive;
    },
  }

This should make each of these items scale down (because of the scale(0) in opacity property),but instead the style attribute doesn't render at all. I also tried an inline ternary on the style prop (since that scale is the only thing that changes between the two properties:

transform: 'translate(-50%,-50%) ' + inactive ? 'scale(' + radarItem.scale + ')' : 'scale(0)',

What am I missing?

Upvotes: 3

Views: 8843

Answers (4)

Deepu Reghunath
Deepu Reghunath

Reputation: 9663

try to use condition in V-bind:style

v-bind:style= "[condition ? {style_A} : {style_B}]"

https://v2.vuejs.org/v2/guide/class-and-style.html

Upvotes: 4

MarcRo
MarcRo

Reputation: 2473

Your solution did not work because you produced double curly brackets

  :style="[{ obj: { styleObject }}]" // This won't work

You can either have an array containing styleObjects or only a styleObject.

E.g.

  :style="[ { color: 'blue' } ]"
  :style="{ color: 'blue' }"

Upvotes: 0

LightBender
LightBender

Reputation: 4253

The style binding expects an object. By wrapping the ternary in square brackets, you're passing in an array containing an object, which is unnecessary. Also, you're wrapping the returned object on either side of the ternary in brackets, which is nesting them further. Removing those brackets will let the returned object can be handled in correctly:

<div 
    :class="{'radar__container':true,'inactive':inactive}"
    :style= "inactive ? getStyleRadarContainerInactive : getStyleRadarContainer"
  >

As a side note, if you add a variable containing an object to another object without specifying property name, the variable name is used as a property name.

var myObject = {
  property: 'value'
};

$('#output').html(JSON.stringify({myObject}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="output"></div>

Upvotes: 3

Christian Carrillo
Christian Carrillo

Reputation: 2761

There should work if you use spread operator like this:

:style= "[inactive ? {...getStyleRadarContainerInactive} : {...getStyleRadarContainer}]"

Upvotes: 1

Related Questions