Clicking on a sortable table column header not working (not sort) when 'sortable' value is dynamic.
Like example below when default fields no sortable or sortable is false, then switch enableSortAble to true, column header is changed (there are arrow sort icon) but clicking the header column is not sorting the column.
<template>
<div>
<b-form-checkbox switch v-model="enableSortAble">
<span :class="enableSortAble ? 'font-weight-bold text-primary' : 'text-secondary'">Sortable</span>
</b-form-checkbox>
<b-table :items="items" :fields="fields" responsive="sm"></b-table>
</div>
</template>
<script>
export default {
data() {
return {
enableSortAble: false,
fields: [
{ key: "last_name" },
{ key: "first_name" },
{ key: "age" },
{ key: "isActive" }
],
items: [
{
isActive: true,
age: 40,
first_name: "Dickerson",
last_name: "Macdonald"
},
{ isActive: false, age: 21, first_name: "Larsen", last_name: "Shaw" },
{ isActive: false, age: 89, first_name: "Geneva", last_name: "Wilson" },
{ isActive: true, age: 38, first_name: "Jami", last_name: "Carney" }
]
};
},
watch: {
enableSortAble(newVal) {
this.fields = this.fields.map(el => {
return { ...el, sortable: newVal };
});
}
}
};
</script>
When click switch button to enable sortable, then clicking on a sortable column header will sort the column.
VersionsLibraries:
Environment:
https://codesandbox.io/s/bvtable-sortable-g6lyz-g6lyz?file=/App.vue
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4