Question

注意：程序中使用的导致我麻烦的数据来自外部，所以很抱歉无法提供完整的工作示例。如果遗漏了某些内容，请告诉我，我正在添加我认为与理解上下文相关的所有信息

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

我正在观看Chrome

中Vue扩展程序中的Vue组件

-2 -

HTML文件包含以下代码

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

当在Dev Tools＆＃39;中观察到元素是空的：

<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

为什么计算属性返回未定义？

2 个答案: