Vue.js binds inline style expressions when rendering an Array - vue.js

Question

I have the following components, I think if the width of the column when the value of a circle in the rendering of a style =" width: 200px ", if the column width no value is not rendering, how do I do?
<template>
<div class="table-scrollable">
<table class="table table-bordered table-hover">
<thead>
<tr v-if="tableOption.columns.length">
<th v-for="(column, index) in tableOption.columns">
{{ column.name }}
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
columns: [{
name: app.localize('Actions'),
width: 200
}, {
name: app.localize('TenancyCodeName'),
field: 'tenancyName'
}, {
name: app.localize('Name'),
field: 'name'
}, {
name: app.localize('Edition'),
field: 'editionDisplayName'
}, {
name: app.localize('Active'),
field: 'isActive',
width: 100
}, {
name: app.localize('CreationTime'),
field: 'creationTime',
}]
}
}
}
</script>
Seeking a solution，thanks！

Answer 1

If you're sure to always have the width, yes, your solution is good enough.
Otherwsise, you can use a method:
methods: {
// a more explicit name would be better
style (width) {
return {
width: width || 200 + 'px'
}
}
}
Then, in the HTML, you could do
<th :style="style(column.width)">...</th>
Or use a computed property that makes sure the style attribute is present

Answer 2

Imo the easiest way would be if you would define styles in object, like this:
{
name: app.localize('Actions'),
style: {
width: '200px', // px suffix required
}
}
so then you can simply do:
<th v-for="(column, index) in columns" :style="column.style">
Is there a better solution?