im create a multi select form using Vue MultiSelect that i install from this link https://www.npmjs.com/package/vue-search-select
here my form
<form @submit.prevent="add" enctype="multipart/form-data">
<multi-select v-model="single.artistname" :options="artist"
:selected-options="items"
placeholder="select item"
@select="onSelect">
</multi-select>
</form>
and this my data return
data() {
return {
files: [],
errors: [],
single: {},
image: '',
success: '',
artist: [],
searchText: '',
items: [],
lastSelectItem: {}
}
},
my add script
add(e) {
let formData = new FormData();
formData.append('artist[]', this.$data.single.artistname);
axios.post('/select-files', formData, config)
.then((response) => {
alert('Data Single Successfull Inserted.')
//this.$router.push('/single/');
})
}
how to make my multi-select produce an array?
so i can input the data to database with simple looping in controller.
After multi-selection, we get an array, just convert that array into json-data and store it in database with table-field of text data-type
during access, reverse same convert json-data into array and process further
you can use json_encode() and json_decode() php-functions
I did same thing with Checkboxes
<b-form-checkbox-group id="checkboxes2" name="flavour2" v-model="cat_id">
<b-col sm='6' v-for="item in categories" :key='item.id'>
<b-form-checkbox v-bind:value="item.id">{{ item.category }}</b-form-checkbox><br/>
<b>Details:</b> <span>{{ item.item_details }}</span>
</b-col>
</b-form-checkbox-group>
Data
data() {
return {
errors:[],
cat_id:[],
}
}
And finally
formData.append('cat_id', cat_id);