Question

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

methods: {

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

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

我想的问题是延误

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

在渲染道具之前，永远不会传递值。有解决方法吗？

Answer 1

问题不是延迟。问题是getPercentCovered()永远不会返回percent：它实际上会返回undefined。您无法return异步操作的结果：在这种情况下，您最多可以做的就是返回整个诺言并在子项中处理。

This famous answer突出显示了代码的一般问题。

现在，关于您的问题的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>

Vue中的异步道具

1 个答案: