Javascript vue模板中的数组未更新
我正在vue中创建动态阵列。此数组是从JSON数组在脚本中填充的，但不会在模板中更新。在模板中，它返回空白数组。这是我的密码：Javascript vue模板中的数组未更新,javascript,arrays,vue.js,Javascript,Arrays,Vue.js,我正在vue中创建动态阵列。此数组是从JSON数组在脚本中填充的，但不会在模板中更新。在模板中，它返回空白数组。这是我的密码： <template> <div> {{users}} <!-- this is returning blank --> </div> </template> <script> export default { data(){ return {
<template>
<div>
{{users}} <!-- this is returning blank -->
</div>
</template>
<script>
export default {
data(){
return {
users: []
}
},
created(){
this.fetchUsers();
},
methods:{
fetchUsers(){
fetch('api/single')
.then(res => res.json())
.then(res => {
this.users= res.data;
console.log(this.users); //this is showing the data
})
.catch(err => console.log(err));
}
}
};
</script>
{{users}}
导出默认值{
数据（）{
返回{
用户：[]
}
},
创建（）{
this.fetchUsers（）；
},
方法：{
fetchUsers（）{
fetch（'api/single'）
.then（res=>res.json（））
。然后（res=>{
this.users=res.data；
console.log（this.users）；//显示数据
})
.catch（err=>console.log（err））；
}
}
};
你可以试试这个。$nextTick（）。因为，DOM的更新在Vue中是异步的。获取API发送异步请求，所以在从API加载数据之前会显示用户。调用绑定到用户的计算方法。获取API发送异步请求，因此在从API加载数据之前显示用户。调用绑定到用户的计算方法。当数据属性值未以正确方式初始化时，会发生这种情况。您应该使用Vue api提供的方法，而不是将数组从提取请求分配给数据属性。由于这种反应性将得以保留。事实上，您甚至可以从数据对象中删除users数组声明，因为vm.$set将覆盖它 因此，您的方法如下所示：
fetchUsers(){
fetch('api/single')
.then(res => res.json())
.then(res => {
this.$set(this, 'users', res.data) // target, key, value
})
.catch(err => console.log(err));
}
当数据属性值未以正确的方式初始化时，会发生这种情况。您应该使用Vue api提供的方法，而不是将数组从提取请求分配给数据属性。由于这种反应性将得以保留。事实上，您甚至可以从数据对象中删除users数组声明，因为vm.$set将覆盖它 因此，您的方法如下所示：
fetchUsers(){
fetch('api/single')
.then(res => res.json())
.then(res => {
this.$set(this, 'users', res.data) // target, key, value
})
.catch(err => console.log(err));
}
我认为问题与阵列的反应性有关。尝试使用foreach循环填充数据，或者按照建议使用vm.$set
res.data.forEach(element => {
this.users.push(element);
});
有关阵列反应性的更多信息，请查看我认为问题与阵列反应性有关。尝试使用foreach循环填充数据，或者按照建议使用vm.$set
res.data.forEach(element => {
this.users.push(element);
});