I'm trying to save multiple values of my checkbox, but I'm getting this error
SQLSTATE[01000]: Warning: 1265 Data truncated for column 'category_id' at row 1 (SQL: insert into `category_product` (`category_id`, `product_id`) values (6,5,4, 15))
I'm not sure where I went wrong in getting this to work.
My Product.vue
<template>
<div class="content-form">
<form @submit.prevent="submit(data)" enctype="multipart/form-data">
<!-- BEGIN CATEGORY MODAL -->
<div class="category-popup">
<div class="btn btn-info btn-sm mb-15" data-toggle="modal" data-target="#myCategories">
Categories
</div>
<div class="modal fade" id="myCategories" tabindex="-1" role="dialog" aria-labelledby="myCategoryLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</div>
<h4 class="modal-title" id="myCategoryLabel">
Categories
</h4>
<span>
Please select categories
</span>
</div>
<div class="modal-body">
<div class="category-select">
<ul >
<li v-for="category in categories" >
<input type="checkbox" tabindex="1" name="category_id[]" :value="category.id" v-model="category_select">
{{ category.title }}
</li>
</ul>
category modal
</div>
</div>
<div class="modal-footer">
<div type="button" class="btn btn-info" data-dismiss="modal">
Save
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END CATEGORY MODAL -->
<!-- BEGIN SUBMIT BUTTON -->
<input type="submit" class="btn btn-primary" value="Submit">
<!-- END SUBMIT BUTTON -->
</form>
</div>
</template>
<script>
export default {
props: [
'categories',
],
mounted() {
console.log('Component mounted.');
},
data() {
return {
category_select: []
};
},
methods: {
save(){
var formData = new FormData();
console.log('this is the checkbox - '+this.category_select);
formData.append('category_id', this.category_select);
if(this.model.id){
formData.append('_method', 'PUT');
return axios.post('/admin/products/'+this.model.id, formData);
}else{
return axios.post('/admin/products', formData);
}
},
submit(){
this.save()
.then(
function(response)
{
console.log(response.data.redirect);
window.location = response.data.redirect;
}
)
},
}
}
</script>
my ProductsController@store
public function store(Request $request)
{
$product = new Product();
$input = $this->getSafeInput($request);
// Creates an array with the input values and addes the category_id value to the array
$categoryId = (array) array_get($input, 'category_id');
$product->fill($input);
$product->save();
$product->category()->sync($categoryId);
return ['redirect' => route('products.index')];
}
I've racked my brain on this and I can't see where I went wrong.