2

Estoy intentando guardar los datos que envío desde la vista Event.vue al método storeEvent del controlador EventController pero me da error 422 y no encuentro hasta el momento el problema.

El modelo Event tiene una relación muchos a muchos con el modelo Categories, y también Event tiene una relación muchos a muchos con el modelo Coins, es por esta razón que ocupo vue-multiselect ya que el usuario puede seleccionar varias categoriras o varias coin para el mismo evento

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>
 </template>
 <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);
                }
           }
    }

Pienso que el problema puede estar cuando le asigno los valores a la sección coin()->attach() y category()->attach(), pero no tengo idea como solucionarlo debido a mi inexperiencia en la herramienta.

El sistema estaba hecho íntegramente en Laravel y funcionaba sin problemas, ahora que se esta actualizando con Vue empezó a dar inconvenientes.

¿Alguna idea? ocupo Laravel 5,6, Vuejs 2, Axios y Vue-multiselect 2

7
  • El error 422 mayormente es por errores de validación, recuerde que en el multiselect al momento de seleccionar se guardan objetos y no id's como seguramente lo hacía con blade. Tenga cuidado con eso en principio el 422 es por validate
    – Dev. Joel
    Commented el 25 abr. 2018 a las 21:05
  • Efectivamente, ¿como puedo trabajar eso? ¿como puedo pasar los valores del objeto a ids?
    – Felipe
    Commented el 25 abr. 2018 a las 21:13
  • Hice lo que me recomendaste, let idcoin = this.coinvalue.map(e=> e.id); y let idcategory = this.categoryvalue.map(e=> e.id); y me arroja este error category undefined coin undefined
    – Felipe
    Commented el 25 abr. 2018 a las 22:31
  • Por consola muestro el objeto que mando por Axios console.log(eventData); y ahí veo que las variables category y coin están con valores undefined
    – Felipe
    Commented el 25 abr. 2018 a las 22:50
  • let idcoin = this.coinvalue.map(e=> e.id); let idcategory = this.categoryvalue.map(e=> e.id); const eventData = {'id' : user.id, 'title': this.title, 'coin': this.idcoin, 'category': this.idcategory}
    – Felipe
    Commented el 25 abr. 2018 a las 22:55

1 respuesta 1

2

El problema es que al intentar enviar los valores por post con axios, el valor de coinvalue y categoryvalue son objetos seleccionados , pero lo que se necesita son solo los id para utilizarlos en el controlador,

Para lograr esto, antes de enviar los datos, puede filtrarlos con la finalidad obtener un nuevo array con solo los id's , para esto puede utilizar map de la siguiente forma.

createdEvent(){
  let urlEvent = '/dashboard/newEvent';
  let idcoin = this.coinvalue.map(e=> e.id); 
  let idcategory = this.categoryvalue.map(e=> e.id);
  const eventData = {
      'id' : this.user.id,
      'title' : this.title,
      'coin' : idcoin ,
      'category': idcategory 
 }
 axios.post(urlEvent, eventData) ...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.