laravel - Data not showing in my console.log in vue

Question

In my vue app I have 2 methods, one method gets some data from my laravel backend and the second one needs to be able to grab it so that I can use it in that method. What I'm struggling with is that the second method isn't grabbing the data.

Here is my code

    <template>
        <app-layout>
            <div class="content-wrapper" style="margin-left: 0;">
                <div class="content">
                    <div class="container">
                        <div class="row pt-5">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                Some data will show here
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </app-layout>
    </template>

    <script>
    import AppLayout from '@/Layouts/AppLayout'
    export default {
        components: {
            AppLayout,
        },
        data() {
            return {
                testData: ''
            }
        },
        methods: {
            firstMethod() {
                axios.get('/api/get-data').then(response => {
                    this.testData = response.data;
                });
            },
            secondMethod(){
                console.log(this.testData);
            }
        },
        mounted() {
            this.firstMethod();
            this.secondMethod();
        }
    }
    </script>

Answer 1

your running both function in mount function so both run at same time and secondMethod() executed 1st at that time your this.testData is not set so you can use async and await to wait to finish firstMethod() then run secondMethod()

which will be like below code

<template>
    <app-layout>
        <div class="content-wrapper" style="margin-left: 0">
            <div class="content">
                <div class="container">
                    <div class="row pt-5">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            Some data will show here
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout";
export default {
    components: {
        AppLayout,
    },
    data() {
        return {
            testData: "",
        };
    },
    methods: {
        async firstMethod() {
            const { data } = await axios.get("/api/get-data");
            this.testData = data;
        },
        secondMethod() {
            console.log(this.testData);
        },
    },
    async mounted() {
        await this.firstMethod();
        this.secondMethod();
    },
};
</script>