Using Vue2, how to bind html element attribute to the property of a variable

Question

Using Vue 2, How do I bind to javascript in an html element attribute?

For example, I'd like to assign a colspan attribute dynamically to the javasript length property value of my data columns.

Instead of this:

<td colspan="4">

I want to do something like this:

<td :colspan="{ columns.length }">

Answer 1

Just don't need to specify brackets. Just do this:

<td :colspan="columns.length">

See the Vue documentation for Template Syntax.