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>
  '
})

invalid expression: Unexpected token ']' in ...

如何应用此样式绑定 - 如果 v-for 中的 navItem 具有子项数组，则应用样式（一个元素的高度乘以子项长度）？

作为帮助，我一直在使用这个。

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;\' }"

vue.js 三元样式绑定 - 无效表达式：意外的标记“]”

vue.js ternary style binding - invalid expression: Unexpected token ']'

coffeescript

vue.js