One solution that passes data to a child component as props and gets another async data with the props.
parent component
<template>
<Selector :user-id="userId"/>
</template>
<script>
import Vue from "vue";
import Selector from "~/components/Selector.vue";
export default Vue.extend({
components: { Selector },
data() {
return {
userId: undefined
};
},
async fetch() {
this.userId = await this.$asios.$get("http://example.com");
}
});
</script>
The parent component passes userId as props.
child component
<template>
<p v-if="user">{{ user.name }}</p>
</template>
<script>
import Vue from "vue";
export default Vue.extend({
props: {
userId: {
type: String,
required: true
}
},
data() {
return {
user: undefined
};
},
watch: {
userId() {
this.getUser();
}
},
methods: {
async getUser() {
if (!this.userId) {
return;
}
this.user = await this.$asios.$get("http://example.com/get_user");
}
}
});
</script>
After the child component get a userId with watch(), it requests an async user data.
Top comments (0)