javascript - 加载数据(最初为空)和没有项目之间的区别

Question

我有一个页面，其中的项目是从 API 检索的，然后显示在页面上。 此 API 请求是在 created Hook 中完成的。我想在它仍在等待 API 响应时显示一条[loading] 消息，在加载完成时显示一条[no items] 消息，但是没有项目。

目前我有一个 IsEmpty 计算属性:

isEmpty() {
  return this.cards.length == 0;
}

但这两种情况都会触发。我如何创建一个属性来处理这两种情况？

Answer 1

尝试添加一个名为 loading 的数据对象属性，该属性最初设置为 true 并将其重置为 false API 回调:

data(){
  return {
     loading:true
    }
 },
computed:{
   isEmpty() {
       return this.cards.length == 0 || this.loading;
  }
},
created (){
   axios.get(...).then(res=>{
      ...
     this.loading=false;
    })