Vue.js binds inline style expressions when rendering an Array

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?