为什么计算的属性返回undefined？

Question

注：在程序中使用的数据导致我的麻烦来自外部，所以我很抱歉无法提供一个完整的工作示例。请让我知道，如果缺少了什么，我加入我beive的所有信息是相关的理解上下文

我Vue的实例有一个computed财产是依赖于一个AJAX调用数据带来。它所做的就是将这些返回的数据（因为它）转换成Vue属性（下面的allcases），以便在HTML代码中重用。

从我的Vue实例的computed部分：

computed: { 
     allcases: function() { 
      console.log('getting all cases') 
      var request = $.ajax({ 
        (...) <- a working AJAX call here, please see below 
       }) 
       .done(function(msg) { 
        console.log('found: ' + JSON.stringify(msg.hits.hits)); 
        return msg.hits.hits; 
       }) 
       .fail(function(jqXHR, msg) { 
        console.log('error posting incident: ' + msg); 
       }); 
     } 
    } 

当运行这个我在控制台上看到

found: {"_index":"incidents","_type":"incidents","_id":"AVxeaaE5n3UYRVv5wrrJ","_score":1,"_source":{"time":"2017-05-31T14:09:22+02:00","lastname":"ert","firstname":"ertr"}},{"_index":"incidents","_type":"incidents","_id":"AVxjykjeqc2UmzuwNYsy","_score":1,"_source":{"time":"2017-06-01T15:13:40+02:00","lastname":"hello2","firstname":null}},{"_index":"incidents","_type":"incidents","_id":"AVxjx3TKqc2UmzuwNYsw","_score":1,"_source":{"time":"2017-06-01T15:10:34+02:00","lastname":"hello","firstname":"worldddd"}},{"_index":"incidents","_type":"incidents","_id":"AVxfOF-sRInTI31ZgCYt","_score":1,"_source":{"time":"2017-06-01T15:12:20+02:00","lastname":"hello","firstname":"worldddd"}},{"_index":"incidents","_type":"incidents","_id":"new incident","_score":1,"_source":{"time":"2017-06-01T15:12:41+02:00","lastname":"hello1","firstname":"ertert"}},{"_index":"incidents","_type":"incidents","_id":"AVxfN4wIRInTI31ZgCYs","_score":1,"_source":{"time":"2017-05-31T17:54:54+02:00","lastname":null,"firstname":null}},{"_index":"incidents","_type":"incidents","_id":"AVxjol5dRInTI31ZgCmI","_score":1,"_source":{"time":"2017-06-01T14:30:04+02:00","lastname":"hjkj","firstname":"hjkhjk"}},{"_index":"incidents","_type":"incidents","_id":"AVxjyKaFqc2UmzuwNYsx","_score":1,"_source":{"time":"2017-06-01T15:11:53+02:00","lastname":"hello","firstname":"world"}}] 

所以return msg.hits.hits前右的msg（和msg.hits.hits）的内容是否正确，内容是我所期望的。

本示例复制the basic one from the documentation。

allcases然而undefined当我运行脚本。

我知道这是因为

-1-

我看在Vue公司扩展Vue的成分在Chrome

-2-

的HTML文件有以下代码

<div id="currentcases"> 
    {{allcases}} 
</div> 

其中，在开发工具元素观察时，是空的：

<div id="currentcases"> 

      </div> 

我真的不知道什么是错的这个代码。

Answer 1

你allcases计算属性为undefined，因为该计算属性的方法未返回值。当您返回done回调中的值时，它不会神奇地返回到您的计算属性方法的范围内。

除非您希望每次依赖vue属性更改时都触发异步调用，否则我不会将此代码作为计算属性。

我会做allcases一个常规数据属性最初设置为null：

data() { 
    return { 
    allcases: null, 
    } 
} 

然后，我把你的异步调用一个新的方法（比如fetchAllcases）。在这种方法中，你可以将allcases数据属性直接设置为msg.hits.hits在done回调：

methods: { 
    fetchAllcases() { 
    let self = this; 
    console.log('getting all cases') 
    var request = $.ajax({ 
      (...) <- a working AJAX call here, please see below 
     }) 
     .done(function(msg) { 
      console.log('found: ' + JSON.stringify(msg.hits.hits)); 
      self.allcases = msg.hits.hits; 
     }) 
     .fail(function(jqXHR, msg) { 
      console.log('error posting incident: ' + msg); 
     }); 
    } 
} 

然后，只需在组件的mounted生命周期挂钩火一次这个方法：

mounted() { 
    this.fetchAllcases(); 
} 

Answer 2

按jQuery docs，呼吁$.ajax回报jqXHR，而这正是你在你的request变量储蓄，而不是msg.hits.hits

达到什么你正在尝试做的，可以考虑使用vue-async-computed