使用 laravel 和 vue.js 提交数据后显示消息

Question

good day; i new in laravel and vue.js when i submit form if i have problem in validate one of input it show correctly like The Brand Name field is required. but my real problem is when submitted form successfully when i show response message that i get from controller **i get only one capital** **litter of message appear** only like ***Y*** like Brand Name field is required. but my real problem is when submitted form successfully when i show response message that i get from controller **i get only one capital** **litter of message appear** only like ***Y*** like "Your Data Added Successfully" but i get the first litter is Y` like attached photo that appear how can i solve this problem thanks here is my controller

<?php

namespace App\Http\Controllers;

use App\PhoneBook;
use Illuminate\Http\Request;
use Validator;

class PhoneBookController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        return view('phonebook');
    }
   }

    public function add(Request $request)
    {
        //prepare data for validation
        $validationarray=Validator::make($request->all(),
            [
                'name' => 'required',
                'phone' => 'required|min:2|required',
                'email' => 'required',
                ]
            ,[],[
                "name"=>"Brand Name",
                'phone' => 'phone',
                'email' => 'Email',
            ]);

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

        // start add data
        $add=PhoneBook::create($branddata)->id;
        if(false !=$add)
        {

            return response(['status'=>'success',"message"=>"Your Data Added Successfully"]);

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


        }



    }

then my route is

Route::post('phonebook/add',"PhoneBookController@add")->name("cart.deleteProductFromCart");

my view code template

<template>
<div>
    <div class="modal fade" id="addData" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <span v-if="list.status=='success'" >Record submitted successfully!</span>

                    <div   v-model="list.message" >{{list.message?list.message[0]:''}}</div>
                    <div class="form-group">

                        <label for="exampleInputEmail1">Brand Name</label>
                            <input type="text" name="name" v-model="list.name" class="form-control" id="exampleInputEmail1" placeholder="Example : Kia - Renault">
                            <p class="help-block">Example : Kia - Renault</p>

                    </div>
                        <div class="form-group">
                            <label  class="col-form-label">phone:</label>
                            <input type="text" name="phone" v-model="list.phone" class="form-control" id="reckipient-name">
                            <p class="help-block">Example : Kia - Renault</p>

                        </div>
                        <div class="form-group">
                            <label  class="col-form-label">email:</label>
                            <input type="text" class="form-control"  v-model="list.email" name="email" id="recikpient-name">
                            <p class="help-block">Example : Kia - Renault</p>

                        </div>

                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" @click="save">Send message</button>
                </div>
            </div>
        </div>
    </div>
</div>
</template>


<script>
    export default {

        name: "addData",
        data: function () {
            return {
                list: {
                    name: '',
                    phone: '',
                    email: '',
                    message:'',

                },



            }
        },
        methods: {
            save: function () {
              axios.post('/phonebook/add',this.$data.list)
                    .then((response) => this.list.message=response.data.message)
                  .catch((error) => this.list.message=error.response.data.message)

            }
        }
    }

</script>
<style scoped>

</style>

[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/sZpDS.png

Answer 1

It's good to pass response as JSON Format

YourXYZController.php
....
$data = new stdClass;
$data->status = "success";
$data->message = "your message";

return response(json_encode($data));

in Vuejs

axios.post('YourXYZController URL', params)
        .then(response => {
          console.log(response)
        })
        .catch(error => {
          console.log(response)
        })
    })

And also it's best practice to check request and response in network tab of browser.