这是下面的父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>