Stop page refresh when submitting form

Question

<template lang="">
    <div class='food-detail'>
        <NavbarTab />
        <div class="container">
        <!-- <h1>Food Detail :{{ $route.params.food_id }}</h1> -->

            <div class="row mt-5">
                <div class="col">
                    <b-breadcrumb :items="items" ></b-breadcrumb>
                </div>
                
            </div> 
            <div class="row mt-3">
                <div class="col-sm">
                    <img :src="'../assets/images/'+product.gambar" :alt="product.gambar" class="img-fluid">
                </div>
                <div class="col-sm">
                    <form  v-on:submit.prevent="pemesanan">
                        <h2><strong>{{ product.nama }}</strong></h2>
                        <hr>
                        <h4>Harga: <strong>Rp. {{ product.harga }}</strong></h4>
                    
                        <label for="textarea-small">Jumlah:</label>
                        <CounterComponent v-model="pesan.jumlah_pemesanan"/>
                        <label for="textarea-small">Keterangan:</label>
                    
                        
                        <b-form-textarea
                            v-model="pesan.keterangan"
                            id="textarea-small"
                            size="sm"
                            placeholder="Pedas, Nasi Setengah, Kuah di Pisah dll ..."
                        ></b-form-textarea>
                        <button type="submit" class="btn btn-success" @click="pemesanan">
                            <b-icon-cart></b-icon-cart>Pesan
                        </button>
                    </form>
                </div>
            </div>  

        </div>

    </div>
    
</template>

<script>

import NavbarTab from '@/components/NavbarTab.vue';
import CounterComponent from '@/components/CounterComponent.vue';
import axios from 'axios';
export default {
    name:"FoodDetailView",

    components:{
        NavbarTab,
        CounterComponent
    },
    data() {
        return {
            product:{},
            pesan:{},
            items:[
                {text:'Home',
                href:'/'},
                {text:'Foods',
                href:'/food'},
                {text:'Food Order',
                href:'#'}
            ]
        }
        
    },
    methods: {
        setProduct(){
            axios
            .get("http://localhost:3000/products/" + this.$route.params.food_id)
            .then((response)=>{this.product = response.data ; console.log(this.$route.params.food_id)})
            .catch((error)=>{console.log(this.$route.params.food_id);console.error(error)} );
        },
        pemesanan(){
            this.pesan.product = this.product;
            axios
            .post('http://localhost:3000/keranjangs', this.pesan)
            .then(()=>{
                this.makeToast(true);
                console.log("sukses")
                })
           
            .catch((err)=>console.error(err));
        },
        makeToast(append = false) {
        // this.toastCount++
        this.$bvToast.toast(`This is toast number ${this.toastCount}`, {
          title: 'BootstrapVue Toast',
          autoHideDelay: 5000,
          appendToast: append
        })
        }
    },
    mounted() {
        this.setProduct()
    },
}
</script>
<style lang="">
    
</style>

When I try to post (pemesanan method) with axios it will refresh the page.

I want to post data without refreshing the page. Is there something wrong with my code?

Answer 1

Call preventDefault() method inside click event listener to avoid page submissioin.

pemesanan(event){
 event.preventDefault();
 ...
}