Bootstrap-vue - How to show/hide a b-table column programmatically

Question

How could I show/hide a column in the BootstrapVue b-table example below based on some event that changes the data model.

<template>
  <button @click="showHideAge=!showHideAge">Show/Hide Age</button>
  <b-table striped hover :items="items"></b-table>
</template>

<script>
const 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' }
]

export default {
  data () {
    return {
      items: items,
      showHideAge: true
    }
  }
}
</script>

Answer 1

You could use computed property to get person details according to the state given by show/hide age button

<template>
    <div>
        <button @click="showHideAge=!showHideAge">Show/Hide Age</button>
        <b-table striped hover :items="persons"></b-table>
    </div>
</template>

<script>
    const 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' }
    ]

    export default {
        data () {
            return {
                items: items,
                showHideAge: true
            }
        },
        computed: {
            persons() {
                if(this.showHideAge) {
                     return this.items
                } else {
                    return items.map(x => ({
                        isActive: x.isActive,
                        first_name: x.first_name,
                        last_name: x.last_name
                   }))
                }
            }
        }
    }
</script>