Mounted() not executed

Question

I’m working with Vue , and I’m doing a view of where the discount coupons will be. I created a.Vue Component for the coupons.

In the view where the coupons will be displayed I hit the API to get the data.

<template>
    <div id="couponAndPartnership">
        <div class="content central">
            <div id="results"
                v-if="coupons && coupons.length > 0">
                <Coupon
                        v-for="coupon of coupons"
                        :key="coupon._id"
                >
                </Coupon>               
            </div>
        </div>
    </div>
</template>
<script>
    import Coupon from "@/components/Coupon.vue";
    export default {
        data(){
            return{
                coupons: []
            };
        },
        components:{
            Coupon
        },
        methods:{
            mounted(){
                console.log("passou no mounted");
                this.axios
                    .get("https:URL/coupons")
                    .then(response => {
                        if (response.status === 200) {
                            console.log(response.data);
                            this.coupons = response.data;
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        this.loading = false;
                    });
            }
        }
    }
</script> 

The problem is I’m not getting anything on the screen. and the next error is 304.And apparently he’s not even entering Mounted() because he doesn’t print anything on the browser console.

Answer 1

My dear, take off the mounted is not a Vue method but a step in the instance life cycle. That is, move the mounted() of methods to the root of classe and try again. So:

`

export default {
        data(){
            return{
                coupons: []
            };
        },
        components:{
            Coupon
        },
        mounted(){
            console.log("passou no mounted");
            this.axios
                .get("https:URL/coupons")
                .then(response => {
                    if (response.status === 200) {
                        console.log(response.data);
                        this.coupons = response.data;
                    }
                })
                .catch(error => {
                    console.log(error);
                    this.loading = false;
                });
            }
        methods:{
        },
    }
`