如何从Vue MultiSelect插入数据库值

Question

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.

Answer 1

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