如何在Vue组件中使用Promise

时间:2018-12-17 15:04:52

标签: javascript vue.js promise vue-component json-ld

这是下面的父Vue:

<template>
<div id="app" class="">
<div class="wrapper">
  <!-- Page Content -->
  <div id="content">
   <div class="container-fluid"> 
      <b-container>
        <router-view
          :srcUrl="srcUrl" :responses="responses[activityIndex]"
          v-on:updateProgress="updateProgress"
          v-on:saveResponse="saveResponse"
        />
      </b-container>
  </div>
</div>

<script>
import jsonld from 'jsonld/dist/jsonld.min';
export default {
name: 'App',
data() {
 return {
  schema: {},
  activityIndex: null,
  responses: {},
};
},
watch: {
$route() {
  if (this.$route.params.id) {
    this.activityIndex = this.$route.params.id;
  }
},
},
mounted() {
axios.get(config.githubSrc).then((resp) => {
  this.schema = resp.data;
  this.progress = _.map(this.schema.ui.order, () => 0);
  this.responses = _.map(this.schema.ui.order, () => new Object());
  if (this.$route.params.id) {
    this.activityIndex = this.$route.params.id;
  }
});
},
computed: {
  srcUrl() {
    if (this.activityIndex) {
      jsonld.expand(this.schema, result => {
        return result;
      });
    }
    return null;
  },
}
};
</script>

如何在Vue计算方法srcUrl中使用jsonld.expand使其返回子vue中的某些内容?据我认为,jsonld是一个异步函数。因此,当我以这种方式编写时,它不起作用。我在孩子身上得到的只是一个未决的诺言。

我该如何解决?

子Vue有这个:

props: ['srcUrl', 'responses'],
watch: {
srcUrl() {
  if (this.srcUrl) {
    this.getData();
  }
},
},
mounted() {
if (this.srcUrl) {
  // eslint-disable-next-line
  console.log('Home mounted: ', this.srcUrl);
  this.getData();
}
},
};
</script>

0 个答案:

没有答案