add data using laravel and vue.js

good day; i new in laravel with vue.js i have simple two questions:- 1- when i want to store email in data base but when i send it using axios request email sent as empty field when i get response from validation that email is required that mean data sent empty 2- i want when data stored successfully i want to show message wthis response and disappear after 3 second other wise show validation error this is my code
my vue.js code

<template>
    <div>
        <!-- ===== start footer ===== -->
        <footer>
            <div class="container">
                <div class="box-form-footer">
                    <div class="boximg-form">
                        <img src="/images/service/message.png" alt="">
                    </div>
                    <div class="row">
                        <div class="col-md-3 col-sm-12">
                            <div class="box-title">
                                <h3> اشترك في النشرة الاخبارية
                                </h3>
                            </div>
                        </div>  

                        <div class="col-md-6 col-sm-12">
                            <div class="box-title">
                                <input v-model="email"  name="email" type="text" placeholder="ضع بريدك الالكتروني">
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-12">
                            <div class="box-title">
                                <button @click="subscribe()"> اشترك</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 col-md-6">
                        <div class="logo-footer">
                            <img :src="`upload/${footerData[0].logo}`" alt="">
                            <p>
                            
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="box-links">
                            <h3>اقسام الموقع </h3>
                            <ul>
                                <li><a href="index.html"><i class="fas fa-chevron-left"></i> الرئيسية</a></li>
                                <li><a href="about-us.html"><i class="fas fa-chevron-left"></i> عن KDL </a></li>
                                <li><a href="service.html"><i class="fas fa-chevron-left"></i> خدماتنا اللوجستية</a></li>
                                <li><a href="order-service.html"><i class="fas fa-chevron-left"></i> طلب خدمة</a></li>
                                <li><a href="careers.html"><i class="fas fa-chevron-left"></i> الوظائف </a></li>
                                <li><a href="branches.html"><i class="fas fa-chevron-left"></i> فروع KDL </a></li>
                                <li><a href="contact-us.html"><i class="fas fa-chevron-left"></i> اتصل بنا</a></li>

                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="box-cont">
                            <h3>تواصل معنا</h3>

                            <div class="box-location-new">
                                <ul>

                                    <li class=".lii"><i class="fa fa-phone fa-fw"></i>  </li>
                                    <li class=".lii"><i class="far fa-envelope-open"></i></li>
                                    <li class=".lii"><i class="fa  fa-map-marker fa-fw"></i> </li>

                                </ul>
                            </div>
                            <ul class="soch">


                                <li><a :href="footerData[0].facebook"> <i class="fab fa-facebook-f"></i></a></li>
                                <li><a :href="footerData[0].instagram"> <i class="fab fa-instagram"></i> </a></li>
                                <li><a :href="footerData[0].twitter"> <i class="fab fa-twitter"></i></a></li>
                                <li><a :href="footerData[0].youtube"> <i class="fab fa-youtube"></i></a></li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="overlay"></div> -->
        </footer>
        <!-- ===== end footer ===== -->

        <!-- =====start copy===== -->
        <div class="copy">
            Copyright 2018 
        </div>
        <!-- =====end copy===== -->
    </div>
</template>

    <script>
        export default {

            name: "myFooter",
            data: function () {
                return {
                    footerData:{},
                    errors:{},
                    email:'',
                    message:'',
                    status:''
                }
            },
            mounted(){
                axios.post('/websiteSetting')
                    .then((response) =>{
                        this.footerData=response.data
                    }).catch((error) =>this.errors=error.response.data.errors )
            },
            methods:{
                subscribe:function () {
                    axios.post('/subscribeMe',this.email)
                        .then((response) =>{
                            if(this.status=='success'){
                                this.message='ok';
                            }else{
                                this.message='failed';
                            }
                            }).catch((error) =>this.errors=error.response.data.errors )

                }
            }


        }
    </script>

my controller is

class SubscribeController extends Controller
{

    //start add email for subscribe user
    public function subscribeMe(Request $request )
    {
        //prepare data for validation


        $validationarray=Validator::make($request->all(),
            [
                'email' => ['required', 'string', 'email', 'max:255', 'unique:subscribes'],
            ],[],[
                'email' => 'Email',
            ]);

        if($validationarray->fails())
        {
            foreach ($validationarray ->messages()->getMessages() as $field_name =>$message):
                $response['message']=$message;
                $response['message1']=$request->email;
            endforeach;
            $response['status']="failed";
            return response()->json($response);
        }
        // start pass data to model
        $data=array(
            'email'     =>$request->email,
        );

        // start add data
        $add=Subscribe::create($data)->id;
        if(false !=$add)
        {
            return response(['status'=>'success',"message"=>"Your Email Added Successfully"]);

        }else{
            return response(['status'=>'failed',"message"=>"Error Adding data please try again !!"]);

        }

    }

}

my route is

Route::post('/subscribeMe', 'SubscribeController@subscribeMe');

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3dDbQLt
via IFTTT