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
let idcoin = this.coinvalue.map(e=> e.id); y let idcategory = this.categoryvalue.map(e=> e.id);
y me arroja este errorcategory undefined
coin undefined
console.log(eventData);
y ahí veo que las variables category y coin están con valores undefinedlet 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}