Как вызвать два метода по очереди в created() в Vue3?

Question

[Light 777]

Как вызвать два метода по очереди в created? Чтобы после вызова первой подхватывался post.user_id и подставлялся во второй вызов?

<template>
  <HeaderComponent :heading=post.title sub-heading="">
                <span class="meta">
                                    Posted by
                                    <a href="#!">{{ user.name }}</a>
                                    on August 24, 2022
                                </span>
  </HeaderComponent>
  <article class="mb-4">
    <div class="container px-4 px-lg-5">
      <div class="row gx-4 gx-lg-5 justify-content-center">
        <h1>{{ user.name }}</h1>
      </div>
    </div>
  </article>

  <FooterComponent></FooterComponent>
</template>
<script>
import BlogDataService from "../services/BlogDataService";
import UserDataService from "../services/UserDataService";
import HeaderComponent from "@/components/HeaderComponent";
import FooterComponent from "@/components/FooterComponent";

export default {
  name: 'PostsComponent',
  components: {HeaderComponent, FooterComponent},
  props:{
    userName: String
  },
  data() {
    return {
      image: "assets/img/home-bg.jpg",
      post: {
        id: null,
        user_id: null,
        title: "",
        body: "",
      },
      user: {
        id: null,
        name: "",
        email: "",
        gender: "",
        status: "",
      },
      posts: []
    };
  },
  methods: {
    async getPost(id) {
      await BlogDataService.get(id)
          .then(response => {
            this.post = response.data;
            console.log(response.data);
          })
          .catch(e => {
            console.log(e);
          });
    },
    getUser(id) {
      UserDataService.get(id)
          .then(response => {
            this.user = response.data;
            console.log(response.data);
          })
          .catch(e => {
            console.log(e);
          });
    },
  },

   created() {
     this.getPost(this.$route.params.id);
     this.getUser(this.post.user_id)

  },
}
</script>

Comments

[0xD34F]

Точно так же, как и не в created и без vue. При чём тут vue? Не при чём. Гуглите, что такое асинхронность и как в js с ней работать.

Answer 1

[plot_pa123]

Сделайте так чтобы ваш метод getPost возвращал вам нужное значение return user_id;
Потом вы можете сделать так

async created(){
let userId = await this.getPost(...);
this.getUser(userId);
}