[Vuejs]-Vue.js ternary style binding – invalid expression: Unexpected token ']'

by

2👍

✅

I think you just want this:

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

A ternary needs all 3 arguments (hence the name). There’s also no need for the square brackets.

I’ve retained your original condition of navItem.subItems. That’ll only work if the subItems array can be missing (i.e. null or undefined). An empty array doesn’t count as falsey so if that’s the case you’re interested in you’ll need to adjust it accordingly.

👤skirtle

2👍

You could drop the ternary and just use a check

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

If you want to check if the array is not empty then you can do this

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

Leave a comment