Closed
Description
- OS: OS X 10.12.6
- Browser: Chrome 62.0.3202.94, Firefox 52.4.1
- Version: 1.4.0
Records with undefined values may render as blanks or as "undefined" strings if items array or sort is manipulated after initial rendering. This is easy to see with a slightly modified version of the bTable sorting example:
https://bootstrap-vue.js.org/docs/components/table/#sorting
The code below modifies the example by removing the first_name field on the first two records. Notice that initially everything renders nicely but after you apply a sort to any of the columns, the cells with missing values are now rendered as "undefined" strings.
<template>
<div>
<b-table :sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:items="items"
:fields="fields">
</b-table>
</div>
</template>
<script>
export default {
data () {
return {
sortBy: 'age',
sortDesc: false,
fields: [
{ key: 'last_name', sortable: true },
{ key: 'first_name', sortable: true },
{ key: 'age', sortable: true },
{ key: 'isActive', sortable: false }
],
items: [
{ isActive: true, age: 40, last_name: 'Macdonald' },
{ isActive: false, age: 21, last_name: 'Shaw' },
{ isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
{ isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
]
}
}
}
</script>