javascript - Vue模板中的数组未更新

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>

标签： javascriptarraysvue.js

Answer 1

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