Question

我正在Vue中创建一个动态数组。此数组已从JSON数组的脚本中填充，但未在模板中更新。在模板中，它返回空白数组。这是我的代码：

<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>

Answer 1

this.$nextTick( () => {
  this.fetchUsers();
})

您可以尝试this.$nextTick()。因为，DOM的更新在Vue中是异步的。

Answer 2

获取API发送异步请求，因此在从API加载数据之前会显示用户。绑定到用户的调用计算方法。

Answer 3

如果数据属性值未正确初始化，则会发生这种情况。不应将获取请求中的数组分配给数据属性，而应使用Vue api提供的 vm.$set 方法。由于这种反应性将得以保留。实际上，您甚至可以从数据对象中删除用户数组声明，因为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));
    }

Answer 4

我相信问题与数组的反应性有关。尝试使用foreach循环填充数据或按照建议使用vm。$ set

res.data.forEach(element => {
  this.users.push(element);
});

有关阵列反应性的更多信息，请查看vuejs common gotchas

vue模板中的数组未更新

4 个答案: