时间戳

首页 > 解决方案 > vue 中的异步 props

asynchronous - vue 中的异步 props

问题描述

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

methods: {

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

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

我想的问题是延迟

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

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

标签： asynchronousvue.jsvuejs2vue-component

解决方案

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

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

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

推荐阅读