показать сообщение после отправки данных, используя laravel и vue. js - PullRequest
Новая
       13

показать сообщение после отправки данных, используя laravel и vue. js

0 голосов
/ 16 марта 2020

добрый день; я впервые в laravel и vue. js, когда я отправляю форму, если у меня возникли проблемы с проверкой одного из введенных данных, она отображается правильно, как 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 apper** only like ***Y*** like «Ваши данные успешно добавлены» but i get the first litter is Y`, как прикрепленная фотография, apper Как я могу решить эту проблему, спасибо, вот мой контроллер 

<?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 !!"]);


        }



    }

, тогда мой маршрут 

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

мой шаблон кода вида 

<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 () {

enter image description here ax ios .post ('/ phonebook / add', this. $ Data.list) .then ((response) => this.list.message = response.data.message) .catch ( (ошибка) => this.list.message = error.response.data.message) 

            }
        }
    }

</script>
<style scoped>

</style>

1 Ответ

0 голосов
/ 17 марта 2020

Хорошо передать ответ как JSON Формат 

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

return response(json_encode($data));

в Vuejs 

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

А также рекомендуется проверять запрос и ответ на вкладке сети браузера.

...