vue. js привязка троичного стиля - недопустимое выражение: неожиданный токен ']'

Question

partNav = Vue.component('part-nav', {
  data:
    navItems: [
      {
        subItems: [
          {...}
          {...}
        ]
      }
      {...} # another object in navItems array
    ]

  template: '
    <div
      v-for="(navItem, navItem_index) in navItems"
      :style="[ navItem.subItems ? { height: (1.3 + 2 * 0.75) * navItem.subItems.length + \'rem;\' } ]"
    >
    </div>
  '
})

недопустимое выражение: неожиданный токен ']' в ...

Как применить эту привязку стиля - если navItem в v-for имеет массив subItems, тогда применить стиль (высота одного элемента, умноженная на длину подэлементов)?

В качестве справки я использовал эту запись .

Answer 1

Я думаю, вы просто хотите это:

:style="navItem.subItems ? { height: (1.3 + 2 * 0.75) * navItem.subItems.length + 'rem' } : {}"

Троице нужно все 3 аргумента (отсюда и название). Также нет необходимости в квадратных скобках.

Я сохранил ваше первоначальное состояние navItem.subItems. Это будет работать только в том случае, если массив subItems может отсутствовать (то есть null или undefined). Пустой массив не считается фальшивым, поэтому, если вас это интересует, вам нужно соответствующим образом его настроить.

Answer 2

Вы можете отбросить троичный и просто использовать проверку

:style="navItem.subItems && { height: (1.3 + 2 * 0.75) * navItem.subItems.length + \'rem;\' }"

Если вы хотите проверить, не является ли массив пустым, вы можете сделать это

:style="navItem.subItems && navItems.subItems.length && { height: (1.3 + 2 * 0.75) * navItem.subItems.length + \'rem;\' }"