如何从 Vue MultiSelect 插入数据库值答案

【问题标题】：how to insert to database value from Vue MultiSelect如何从 Vue MultiSelect 插入数据库值
【发布时间】：2018-12-24 10:51:33
【问题描述】：

我使用我从这个链接https://www.npmjs.com/package/vue-search-select安装的 Vue MultiSelect 创建了一个多选表单

这是我的表格

<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>

这是我的数据返回

data() {
            return {
                files: [],
                errors: [],
                single: {},
                image: '',
                success: '',
                artist: [],
                searchText: '',
                items: [],
                lastSelectItem: {}
            }
        },

我的添加脚本

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

如何让我的多选产生一个数组？

所以我可以通过控制器中的简单循环将数据输入数据库。

【问题讨论】：

只需在像这样的数据中分配数组 single.artistname:[]
之后只需在追加 formData.append('artist', this.$data.single.artistname);
不工作....

标签： php laravel vue.js

【解决方案1】：

多选后，我们得到一个数组，只需将该数组转换为json-data并以文本数据类型的table-field存储到数据库中

在访问过程中，逆向同样将json-data转为数组并进一步处理

您可以使用 json_encode() 和 json_decode() php 函数

【讨论】：

【解决方案2】：

我对复选框做了同样的事情

<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() {
           return {
        errors:[],
        cat_id:[],
    }
    }

最后

formData.append('cat_id', cat_id);

【讨论】：

我认为它不同