1👍
You need to declare userdata
in data
block, added notes explaining what changed:
<template>
<div>
<v-data-table
:headers= "headers"
:items= "userdata"
class="elevation-1"
hide-default-header
hide-default-footer
>
</v-data-table>
</div>
</template>
<script>
import firebase from '@/configFirebase.js'
export default {
data: ()=> ({
headers: [
{
text: 'Active Users',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Email', sortable: false, value: 'email' },
{ text: 'Is Admin', sortable: false, value: 'isAdmin'},
],
userdata: [], // Here you datatable will be able to access it.
}),
methods: {
aUserData() {
firebase.db
.collection('cUsers').get().then((querySnapShot) => {
// this.userdata = [] // This does not get exposed to template
querySnapShot.forEach((doc) => {
this.userdata.push({
name: doc.data().name,
email: doc.data().email,
isAdmin: doc.data().isAdmin
})
})
})
},
getitemcontrols() {
return `item.isAdmin`;
},
},
mounted() {
},
created(){
this.aUserData();
},
computed: {
user() {
return this.$store.getters.user
},
}
}
</script>
Also, if I may suggest, stick to consistent camelCase
variable/methods names, makes reading code much easier, and once you get used to using camelCase, makes it easier to spot mistakes.
- [Vuejs]-Vue component – entity multi select – is there any option to add a sorting feature?
- [Vuejs]-Undefined variable on production setup, correct value on development
Source:stackexchange.com