Invalid prop: type check failed for prop “cellClass”. Expected String with value “[object Object]”, got Object

Question

I'm trying to conditionally apply a CSS class to a row (all b-table-column ) in a b-table , like this:

<b-table-column class="is-unselectable" 
    :cell-class="{ 'has-pointer-cursor': props.row.url != null }" 
    field="version" label="Name" :custom-sort="sortName" sortable>

    <!-- Content -->

</b-table-column>

The class has-pointer-cursor exists in the style part of that vue page/component.

I'm getting this error/warning in the console:

[Vue warn]: Invalid prop: type check failed for prop "cellClass". Expected String with value "[object Object]", got Object

 found in ---> <BTableColumn> <BTable> <MyPage> at src/views/MyPage.vue <App> at src/App.vue <Root>

But somehow, it's working as expected (not taking into consideration the error message)!

What's happening and how it still works? Is there any way to fix it?

Answer 1

The b-table-column component expects a string value for the cell-class prop but you are passing it an object.

Try this instead

<b-table-column :cell-class="props.row.url ? 'has-pointer-cursor' : ''" ...>