Vue中的异步道具

Question

我有一个方法可以进行异步调用。

methods: {

        getPercentCovered() {
          this.getPercentageCompletedBySubject(1).then((percent) => {
          return percent;
        });
},

它从ajax请求返回的值计算百分比。

我想的问题是延迟

<progress-bar :percent="getPercentCovered()"></progress-bar>

在呈现道具之前，永远不会传递该值。有没有解决的办法？

Answer 1

问题不在于延迟。问题是getPercentCovered()永远不会返回percent：它实际上会返回undefined。您不能return得出异步操作的结果：在这种情况下，您最大可能要做的就是返回整个诺言并在子进程中进行处理。

这个著名的答案突出了您的代码的一般问题。

现在，关于您的问题的Vue部分，有几种解决方法。我猜最简单的方法是将一个道具传递给孩子，当孩子getPercentageCompletedBySubject解决问题时该道具会更新。我将呼叫置于created()生命周期挂钩中。也许您应该将其移至事件处理程序，这实际上取决于实际用例：

//script
data() {
  return {
    percent: '', //or maybe null or whatever empty value.
  };
},
methods: {
        getPercentCovered() {
          this.getPercentageCompletedBySubject(1).then((percent) => {
          this.percent = percent; //instead of return from a handler, which does nothing ,
          // now we assign to this.percent
        });
},
created(){
  this.getPercentCovered();
}

//template
<progress-bar :percent="percent"></progress-bar>