vue.js 三元样式绑定 - 无效表达式：意外标记']'答案

【问题标题】：vue.js ternary style binding - invalid expression: Unexpected token ']'vue.js 三元样式绑定 - 无效表达式：意外标记']'
【发布时间】：2020-07-30 23:36:50
【问题描述】：

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

无效的表达式：意外的标记 ']' in ...

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

作为帮助，我已经使用了这个post。

【问题讨论】：

标签： vue.js coffeescript

【解决方案1】：

我想你只是想要这个：

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

三元组需要所有 3 个参数（因此得名）。也不需要方括号。

我保留了navItem.subItems 的原始状态。这只有在subItems 数组可能丢失时才有效（即null 或undefined）。空数组不算作假，因此如果您对此感兴趣，则需要相应地进行调整。

【讨论】：

【解决方案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;\' }"

【讨论】：