title: Vuejs Ternary Operator / Conditional Not Working in v-bind-style
body: <p>I'm getting some weird behavior trying to implement a conditional for the style of items in Vuejs.</p>
  
  <p>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. </p>
  
  <p>Given this div:</p>
  
  <pre><code>&lt;div 
      :class="{'radar__container':true,'inactive':inactive}"
      :style= "[inactive ? {getStyleRadarContainerInactive} : {getStyleRadarContainer}]"
    &gt;
  </code></pre>
  
  <p>I would implement this style:</p>
  
  <pre><code>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;
      },
    }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>transform: 'translate(-50%,-50%) ' + inactive ? 'scale(' + radarItem.scale + ')' : 'scale(0)',
  </code></pre>
  
  <p>What am I missing?</p>