vuejs how can i pass my data back to view please - vue.js

Question

Can any one assist with why i cant get my array into the following please
HTML:
<table class="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Email</td>
<td>Password</td>
</tr>
</thead>
<tbody>
<tr v-if="email" v-for="mail in email" :key="">
<td>{{ allMyUsers.id }}</td>
<td>{{ allMyUsers.name }}</td>
<td>{{ allMyUsers.email }}</td>
<td></td>
</tr>
</tbody>
</table>
I'm calling my results as follows, i can see that the array is passed through my log (I think) but really strugging to understand my problem
Script:
import axios from 'axios';
export default {
computed: {
allMyUsers () {
return !this.$store.getters.alluser ? false : this.$store.getters.alluser
},
},
created () {
this.$store.dispatch('allUsers')
}
}
My code for getting the data is as follows and definately returns the data as I can see it in the log, just not sure if im passing it out
allUsers ({commit, state}) {
if (!state.idToken) {
return
}
globalAxios.get('/users.json')
.then(res => {
const data = res.data
const allUsers = []
for (let key in data) {
const user = data[key]
user.id = key
allUsers.push(user)
}
commit('storeUser', allUsers)
})
.catch(error => console.log(error))
}
My getter is as follows
getters: {
alluser (state) {
return state.allUsers
},
}
})
Any support very much appreciated as im new to vue so very much still learning
Many thanks for the help so far, I have tried to follow your guidance but nothing is returned and i now have no errors
my updated code is as follows, I was sure I d followed the guidance you kindly provided
HTML:
<tr v-if="myuser" v-for="myuser in allMyUsers" :key="">
<td>{{ myuser.email }}</td>
<td></td>
</tr>
SCRIPT:
<script>
import axios from 'axios';
export default {
computed: {
allMyUsers () {
return !this.$store.getters.myuser ? false : this.$store.getters.myuser
},
},
created () {
this.$store.dispatch('allMyUsers')
}
}
</script>
GETTER:
myuser (state) {
return state.myuser
},
Function:
allMyUsers ({commit, state}) {
if (!state.idToken) {
return
}
globalAxios.get('/users.json' + '?auth=' + state.idToken)
.then(res => {
const data = res.data
const myusers = []
for (let key in data) {
const myuser = data[key]
myuser.id = key
myusers.push(myuser)
}
commit('storemyuser', myusers)
})
.catch(error => console.log(error))
}
And finally my MUTATION:
storemyuser (state, myuser) {
state.myuser = myuser
},
Thankyou again for your assistance, you guys really are great at helping newbes like me learn

Answer 1

Your v-for loop is not good, email property is not defined in your component, you only defined a computed allUsers property (with getters from your store). It's this one you need to use :
<tr v-if="user" v-for="user in allUsers" :key="">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td></td>
</tr>