Vue 迭代循环 json 占位符

Question

我正在尝试在 Vue(使用 axios(中检索一个 json 用户。显然它可以工作，但我不能(或者我不知道(如何迭代所有数组元素。问题很简单 ¿如何在 Vue2 中工作循环？

<script>
import axios from 'axios';
export default {
data() {
return {
users: []
}
}
}
axios.get('https://jsonplaceholder.typicode.com/users').then((response)=>{  
this.users = response.data
console.log(this.users);
})
</script>
//Loop
<ul>
<li v-for="user in users" :key="user.name">
<p>
<strong>{{user.name}}</strong>
</p>
<p>{{user.email}}</p>
</li>
</ul>

Answer 1

你的代码的问题(如果它不是复制粘贴错别字(是你的 axios 调用以不正确的方式被丢弃在脚本部分内，所以当你这样做时this.user = data你永远不会到达组件的用户属性，你的功能必须在methods属性内或像mounted这样的救生钩中才能在你观察时工作。

正确方法的示例：

methods: {
loadUsers () {
axios.get(...).then(users => this.users = users)
}
},
mounted() {
this.loadUsers()
}

Answer 2

我试过了

export default {
data() {
return {
userss: []
}
},
beforeMount : function()
{
this.userss.push({name: 'bob', email: 'bob@'});
this.userss.push({name: 'maria', email: 'maria@'});
console.log('alex : ', this.userss);
console.log('alex2: ', this.userss[0].name);
console.log('alex3: ', this.userss[1].name);
}
and 
<ul>
<li v-for="user in userss" :key="user.name">
<p>
<strong>{{user.name}}</strong>
</p>
<p>{{user.email}}</p>
</li>
</ul>

我有一个很好的结果：测试

我打印了我拥有的控制台：

测试控制台

我认为你没有以好的方式得到你的结果：

> axios.get('https://jsonplaceholder.typicode.com/users').then((response)=>{  
this.users = response.data
console.log(this.users);
})

如果你尝试console.log(this.users);圈外，你不会和我一样

我认为您必须尝试让您的用户进入 beforemount：

<script>
import axios from 'axios';
export default {
data() {
return {
users: []
}
},
beforeMount : function()
{
axios.get('https://jsonplaceholder.typicode.com/users').then((response)=>{  
this.users = response.data
})
console.log(this.users);
}
}
</script>
//Loop
<ul>
<li v-for="user in users" :key="user.name">
<p>
<strong>{{user.name}}</strong>
</p>
<p>{{user.email}}</p>
</li>
</ul>