Тернарный оператор Vuejs/условный не работает в стиле v-bind

Я получаю какое-то странное поведение, пытаясь реализовать условие для стиля элементов в Vuejs.

Я видел С.О. посты о том, как реализовать троичный код как с помощью интерполированной строки, так и с помощью вычисляемого объекта стиля. Я пробовал оба, но ни один из них не работает должным образом.

Учитывая этот div:

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

Я бы реализовал этот стиль:

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;
    },
  }

Это должно уменьшить масштаб каждого из этих элементов (из-за масштаба (0) в свойстве непрозрачности), но вместо этого атрибут стиля вообще не отображается. Я также попробовал встроенный троичный элемент в опоре стиля (поскольку этот масштаб — единственное, что меняется между двумя свойствами:

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

Что мне не хватает?


javascript vue.js conditional-statements css ternary-operator
person mheavers    schedule 27.08.2019    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Привязка стиля ожидает объект. Заключая тройку в квадратные скобки, вы передаете массив, содержащий объект, что не нужно. Кроме того, вы оборачиваете возвращаемый объект по обе стороны от тройки в скобки, что еще больше вкладывает их. Удаление этих скобок позволит правильно обрабатывать возвращаемый объект:

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

В качестве примечания: если вы добавляете переменную, содержащую объект, в другой объект без указания имени свойства, имя переменной используется в качестве имени свойства.

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>

person LightBender    schedule 27.08.2019

arrow_upward
1
arrow_downward

попробуйте использовать условие в V-bind:style

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

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

person Deepu Reghunath    schedule 27.08.2019

arrow_upward
1
arrow_downward

Должно работать, если вы используете оператор расширения как это:

:style= "[inactive ? {...getStyleRadarContainerInactive} : {...getStyleRadarContainer}]"
person Christian Carrillo    schedule 27.08.2019

arrow_upward
0
arrow_downward

Ваше решение не сработало, потому что вы создали двойные фигурные скобки

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

У вас может быть либо массив, содержащий объекты стиля, либо только объект стиля.

E.g.

  :style="[ { color: 'blue' } ]"
  :style="{ color: 'blue' }"
person MarcRo    schedule 27.08.2019
comment
Интересно, я не знал, что они объединятся, если вы предоставите массив объектов... спасибо за это. это может быть полезно в какой-то момент :) Я обновлю свой ответ. - person LightBender; 27.08.2019
comment
Да, они сливаются со свойствами объектов справа, переопределяя свойства слева. - person MarcRo; 27.08.2019