bugfix> laravel > 投稿

イベントビューから送信したデータを保存しようとしています。 EventControllerドライバーのstoreEventメソッドでエラー422が表示され、これまでのところ問題を見つけることができません。

EventモデルはCategoriesモデルと多対多の関係にあり、EventもCoinsモデルと多対多の関係にあります。ユーザーが複数のカテゴリーまたは複数のコインを選択できるので、vue-multiselectを使用します。同じイベントに対して

Event.vue

<template>
  <form v-on:submit.prevent="createdEvent" class="form-horizontal">
   <div class="form-group row">
     <label>Titulo</label>
     <input type="text" name="title" maxlength="25" v-model="title">
   </div>
   <div class="form-group row">
     <label>*Cryptodivisas</label>
     <multiselect v-model="coinvalue" :options="coins"
                :multiple="true" label="name" 
                track-by="id" placeholder="Seleccione">
     </multiselect>
   </div>
   <div class="form-group row">
     <label>*Categoría</label>
     <multiselect v-model="categoryvalue" :options="categories"
                :multiple="true" label="name" 
                track-by="id" placeholder="Seleccione">
     </multiselect>
   </div> 
   <div class="col-sm-12">
     <button class="btn" type="submit">Crear evento</button>
   </div>
 </form>

<script>
    import Multiselect from 'vue-multiselect';
    export default {  
      components: { 
        Multiselect,
      },
      props: ['auth'],     
      data () {
        return {
            user:           {},
            title:          '',
            coins:          [],
            coinvalue:      [],
            categories:     [],
            categoryvalue:  [], 
       }
      },
      created() {
        this.getCoins();
        this.getCategories();
      },
      mounted() {
        this.user = JSON.parse(this.auth);
      },
      methods: {
        getCoins(){
            let urlCoin = '/dashboard/coins';
            axios.get(urlCoin)
                .then((response) => {
                    this.coins = response.data;
                })
                .catch((err) => {
                })
        },
        getCategories(){
            let urlCategories = '/dashboard/categories';
            axios.get(urlCategories)
                .then((response) => {
                    this.categories = response.data;
                })
                .catch((err) => {
                })
        },
        createdEvent(){
            let urlEvent = '/dashboard/newEvent';
            const eventData = {
                'id'            : this.user.id,
                'title'         : this.title,
                'coin'          : this.coinvalue,
                'category'      : this.categoryvalue,
            }
            console.log(eventData);
            axios.post(urlEvent, eventData)
                .then((response) => {
                    console.log(ok);
                })
                .catch((err) => {
                    console.log(err.response.data);
                })
        }
 </script>

storeEvent(EventController)

public function storeEvent(Request $request)
 {
      $this->validate($request, [
                'title'    => 'required|max:25',
                'coin'     => 'required',
                'category' => 'required',
        ]);
        $userAuth = Auth::user()->id;
        $userEvent = $request->id;
        if($userAuth === $userEvent){
            $event = new Event;
            $event->user_id = $userEvent;
            $event->title = $request->title;   
            if($event->save()){
                $event->coins()->attach($request->coin);
                $event->categories()->attach($request->category);
                return response()->json([
                        'status' => 'Muy bien!',
                        'msg' => 'Tu evento ya fue creado con éxito.',
                        ], 200);
            }
            else {
                return response()->json([
                            'status' => 'Error!',
                            'msg' => 'No pudimos crear tu evento.',
                        ], 401);
            }
       }
}

私は問題をコインに値を割り当てるときだと思う()-> 添付()およびカテゴリ()-> ()セクションを添付しますが、ツールの経験が浅いため、解決方法がわかりません。

システムは完全にLaravelで作成され、問題なく機能しましたが、Vueでアップデートされて不便になり始めました。

何か案は? Laravel 5,6、Vuejs 2、Axios、およびVue-multiselect 2を占有します

回答 2 件
  • フォームデータを送信してみてください

    以下に例を示します。

    var urlEvent = '/dashboard/newEvent';
    var form_data = new FormData();
    form_data.append('id',this.user.id);
    form_data.append('title',this.title);
    for(let coin of this.coinvalue)
        form_data.append('coin[]', coin);
    for(let category of this.categoryvalue)
        form_data.append('category[]', category);
    axios(urlEvent,{
        method: "post",
        data: form_data
    })
    .then(res => {
        console.log(ok);
    })
    .catch(err => {
        console.log(err.response.data);
    });
    
    

    それでも静止すると、422ステータスコード(処理不可能なエンティティ)が表示されます。次に、コントローラーで$requestを返します。そして、実際にコントローラーに送信されるデータと検証内容を確認します。

  • 422は検証エラーを意味するため、 console.log  または axios の要素を検査します  電話して確認してください:

    'title'         : this.title,
     'coin'          : this.coinvalue,
     'category'      : this.categoryvalue,
    
    

    空ではありません。原因は、 422 であるため、上記の一部のデータが欠落しているためです。  検証例外。

あなたの答え