new Vue({
el: '#app',
computed: {
computedFields() {
// If the user isn't an admin, filter out fields that require auth.
if(!this.isUserAdmin)
return this.fields.filter(field => !field.requiresAdmin);
// If the user IS an admin, return all fields.
else
return this.fields;
}
},
data() {
return {
isUserAdmin: false,
fields: [
{ key: 'first', label: 'First Name' },
{ key: 'last', label: 'Last Name' },
{ key: 'age', label: 'Age' },
{ key: 'sex', label: 'Sex' },
{ key: 'secretActions', label: 'Secret Actions', requiresAdmin: true },
],
items: [
{ first: 'John', last: 'Doe', sex: 'Male', age: 42 },
{ first: 'Jane', last: 'Doe', sex: 'Female', age: 36 },
{ first: 'Rubin', last: 'Kincade', sex: 'Male', age: 73 },
{ first: 'Shirley', last: 'Partridge', sex: 'Female', age: 62 }
]
}
}
})
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<div id="app" class="p-3">
<b-btn @click="isUserAdmin = !isUserAdmin">
Toggle admin user ({{ isUserAdmin }})
</b-btn>
<br /><br />
<b-table :fields="computedFields" :items="items">
<template v-slot:cell(secretActions)>
<b-btn>Edit User</b-btn>
<b-btn>Delete User</b-btn>
</template>
</b-table>
</div>
