任何人都可以帮助解释为什么我不能将我的阵列变成以下内容
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>
我正在调用我的结果如下,我可以看到数组通过我的日志传递(我认为)但是真的很难理解我的问题
脚本:
import axios from 'axios';
导出默认{
computed: {
allMyUsers () {
return !this.$store.getters.alluser ? false : this.$store.getters.alluser
},
},
created () {
this.$store.dispatch('allUsers')
}
}
我获取数据的代码如下,并且肯定会返回数据,因为我可以在日志中看到它,只是不确定是否将其传递出去
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))
}
我的吸气器如下
getters: {
alluser (state) {
return state.allUsers
},
}
})
任何支持都非常赞赏,因为我很新,所以仍在学习
非常感谢您的帮助到目前为止,我已经尝试按照您的指导,但没有任何回复,我现在没有错误
我的更新代码如下,我确信我会遵循您提供的指导
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>
吸气剂:
myuser (state) {
return state.myuser
},
功能:
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))
}
最后我的MUTATION:
storemyuser (state, myuser) {
state.myuser = myuser
},
再次感谢你的帮助,你们真的非常善于帮助像我这样的新人学习
答案 0 :(得分:1)
您的v-for
循环不好,email
属性未在您的组件中定义,您只定义了计算的allUsers
属性(使用商店中的getter)。这是你需要使用的那个:
<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>