Asynchronous vue中的异步道具

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

methods: {

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

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

我想问题在于延迟

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

---

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

问题不在于延迟。问题是getPercentCovered永远不会返回percent：它实际上返回undefined。您不能返回异步操作的结果：在这种情况下，您最多只能返回整个承诺并在子级中处理它

突出显示代码的一般问题

现在，关于问题的Vue部分，有几种方法可以解决这个问题。我想最简单的方法是向子对象传递一个道具，当getPercentageCompletedBySubject解析时，该道具将被更新。我正在将调用放入创建的生命周期挂钩中。也许您应该将其移动到事件处理程序，这实际上取决于实际用例：

//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>

---

问题不在于拖延。问题是getPercentCovered永远不会返回percent：它实际上返回undefined。您不能返回异步操作的结果：在这种情况下，您最多只能返回整个承诺并在子级中处理它

突出显示代码的一般问题

现在，关于问题的Vue部分，有几种方法可以解决这个问题。我想最简单的方法是向子对象传递一个道具，当getPercentageCompletedBySubject解析时，该道具将被更新。我正在将调用放入创建的生命周期挂钩中。也许您应该将其移动到事件处理程序，这实际上取决于实际用例：

//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>

---

谢谢你的回答。我让它工作，但觉得有一个更干净的方式。我可能可以在需要此组件之前进行计算，并将其保存在vuex存储中。谢谢您的回答。我让它工作，但觉得有一个更干净的方式。我可能可以在需要此组件之前进行计算，并将其保存在vuex存储中。